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的交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。