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

}

}