react-native 原生組件封裝與原生模塊和js的交互
React-native 與原生模塊之間的交互
與原生模塊之間交互,主要分兩種,?
一. 只需要導出方法 傳遞參數等交互 模塊之間交互
二. 視圖交互 JS 需要用到native的原生的視圖控件
?
為了看得更直接先上圖
原生模塊 ps:這是一個APP的是否允許通知的功能 需要把native獲得的信息傳到js,js端根據是否打開通知去做處理
//本地新建一個manager類繼承自NSObject 遵守RCTBridgeMoudle協議
// 暴露出來模塊和方法 js端主動調用這個方法 在callback回調里把獲取到的是否打開通知的參數傳給js
?
js端
// 就是這麼簡單 利用NativeModule獲取到該模塊,調用native方法,在回調里取到參數,setState
?
1>>> 創建ios模塊
?
創建一個接口,實現RCTBridgeModule協議,然後把想在JS中調用的方法用RCT_EXPORT_METHOD包裝,最後再用RCT_EXPORT_MODULE 導出即可
// native 可以這麼寫
#import "RCTBridgeModule.h"
?
@interface MyCustomModule : NSObject <RCTBridgeModule>
@end
?
@implementation MyCustomModule
?
RCT_EXPORT_MODULE();
?
// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
// 這個方法由JS主動調用 如果需要native傳遞參數給JS 可以採用這種回調的方式
? callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
}
@end
?
//JS端 可以這麼寫
?
import React, {
? Component,
} from 'react';
import {
? NativeModules,
? Text
} from 'react-native';
?
class Message extends Component {
? constructor(props) {
? ? super(props);
? ? this.state = { text: 'Goodbye World.' };
? }
? componentDidMount() {
? ? NativeModules.MyCustomModule.processString(this.state.text, (text) => {
? ? ? this.setState({text});
? ? });
? }
? render() {
? ? return (
? ? ? <Text>{this.state.text}</Text>
? ? );
? }
}
?
顯示先上圖
// 跟中文網上的一樣還是搞mapView
// native端
?
// 我覺得這兩個都沒什麼好解釋的吧 ?唯一一個注意點是 一定要導出個屬性,不然就是一個紅色的方框,不會顯示出來地圖,應該是官方的bug
js 端
// 也很容易 ?先創建一個View組件 mapView.js ?導出組件 ?然後再page中把它當成一個視圖一樣使用就行了
1>>> 創建ios View
?
自定義iOS ? View 首先創建一個manager類,繼承自RCTViewManager,然後實現一個-(UIView *)view方法.並且使用RCT_EXPORT_VIEW_PEOPERTY導出屬性,最後用一個js文件鏈接并進行包裝
?
// native 可以這麼寫
?
#import "RCTViewManager.h"
?
@interface MyCustomViewManager : RCTViewManager
@end
//? js端? var XXX(下面引用的組件名) = requireNativeComponent(‘原生模塊名’,當前js類名)
@implementation MyCustomViewManager
?
RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);? // 導出屬性
?
- (UIView *)view
{
//MyCustomerView 即為原生的要導出的View
? return [[MyCustomView alloc] init];
}
@end
?
?
//JS端 可以這麼寫 封裝成一個view組件
?
import React, {?
? Component,
} from 'react';
import PropTypes from 'prop-types';
import { requireNativeComponent } from 'react-native';
?
var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
?
export default class MyCustomView extends Component {
? static propTypes = {
? ? myCustomProperty: PropTypes.oneOf(['a', 'b']),?
? };
? render() {
? ? return <NativeMyCustomView {...this.props} />;
? }
}
?
轉載于:https://www.cnblogs.com/ChrisZhou666/p/7724128.html
總結
以上是生活随笔為你收集整理的react-native 原生組件封裝與原生模塊和js的交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python常用数据结构
- 下一篇： hdu6165（拓扑排序+tarjan缩