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} />;
}
}