Android如何监听RN加载完成,React-Native与Android、iOS原生代码交互，完成JS发给原生，原生回调给RN页面...

首先我们先来看下iOS的代码

A4431638-2479-432B-938C-4843F8945518.png

#import

@interface TakeViewManager : NSObject

@end

#import "TakeViewManager.h"

@interface TakeViewManager ()

@end

@implementation TakeViewManager

// 标记宏(必要)

为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

RCT_EXPORT_MODULE() 或者 RCT_EXPORT_MODULE(TakeViewManager)

// 对外提供调用方法(addEventCeshi为方法名，后面为参数，按顺序和对应数据类型在js进行传递)

RCT_EXPORT_METHOD(addEventCeshi:(NSString *)name callback:(RCTResponseSenderBlock)callback){

// 接收RN传过来了name

if([name isEqualToString:@"测试"]){

NSString *callbackData = [NSString stringWithFormat:@"处理结果:%@",name];

//回掉给JS

callback(@[[NSNull null],callbackData]);

}

}

@end

我们再来看下Android如何实现的，如图

56FE6AA5-9FF0-4816-AFF1-173553AB8C19.png

ReactContextBaseJavaModule ： 用于自定义实现原生代码调用

继承ReactContextBaseJavaModule

package com.videodemo;

import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

/**

* Created by wangjiawei on 2018/5/21.

* 原生的代码，之后与JS交互

*/

public class TakeViewModule extends ReactContextBaseJavaModule {

public TakeViewModule(ReactApplicationContext reactContext) {

super(reactContext);

}

/**

* 该方法就是给js使用

* Java方法需要使用注解@ReactMethod。

* 方法的返回类型必须为void。

* 测试安卓的回调方法

* React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件

* */

@ReactMethod

public void addEventCeshi(String name, Callback callback) {

// 1.处理业务逻辑...

String result = "处理结果：" + name;

// 2.回调RN,即将处理结果返回给RN

callback.invoke(true,result);

}

/**

* return

* string

* 这个名字在JavaScript端标记这个模块

* 这样就可以在JavaScript中通过React.NativeModules.TakeViewManager访问到这个模块

* */

@Override

public String getName() {

return "TakeViewManager";

}

}

这个类其实就是实现原生代码的调用。

A24E2F87-AE9F-4441-ACA2-8CCB46DA86DD.png

现在说另一个类ReactPackage,其实该类的基本作用就是把继承ReactContextBaseJavaModule类的方法注册到JS里。如图

2D013072-B04D-464E-BBA0-A85F7545F1B4.png

代码如下

package com.videodemo;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.JavaScriptModule;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.List;

import java.util.Arrays;

import java.util.Collections;

/**

* Created by wangjiawei on 2018/5/21.

* 现在说另一个类ReactPackage,其实该类的基本作用就是把继承ReactContextBaseJavaModule类的方法注册到JS里

*/

public class TakeViewPackage implements ReactPackage {

// 其中就把TakeViewModule对象添加到modules这个list上。

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

return Arrays.asList(new TakeViewModule(reactContext));

}

// 返回Collections.emptyList();

public List> createJSModules() {

return Collections.emptyList();

}

// 返回Collections.emptyList();

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

}

最后一个java类Application，这个写过Android的应该对这个类并不陌生，其实就是这个Application的生命周期贯穿整个app程序。程序初始化会调用该类的onCreate方法。

48870AE4-144A-47D6-9124-CD42E2B7CFE7.png

package com.videodemo;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new TakeViewPackage() //自定义的package

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

}

}

原生的代码到此写完

来看下我们JS代码如何实现的

B0D2D79E-D776-44CD-A5E1-EEC3F9BBBE5E.png

代码如下

import React, { Component } from 'react';

import {

Platform,

StyleSheet,

Text,

View,

NativeModules,

TouchableOpacity,

} from 'react-native';

var TakeViewManager = NativeModules.TakeViewManager;

type Props = {};

export default class App extends Component {

ceshi(){

TakeViewManager.addEventCeshi(('测试'),(error,events) =>{

alert(events);

});

}

render() {

return (

this.ceshi()}>

测试

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

最终看下实现iOS与Android的效果图

8B764809-65FC-40F6-9638-16440222C106.png