(React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信

本篇讲述 Android 原生代码 和 ReactNative相互通信，方法之间的调用：

项目是接着上篇文章写得：

上篇：(React-Native 学习之七) Rn混合开发之–Activity直接引用React native组件

项目结构：



界面：

代码:

主要分三个部分 直接引用 Rn界面，和 原生调用 Rn吐司，以及Rn调用原生吐司。

直接引用界面已在上篇给出。

下面是 方法调用。当然还有其他通信方式 后续文章会添加：

步骤：

1，新建 通信接口类：

CommunicationInterface：

public class CommunicationInterface extends ReactContextBaseJavaModule{

private  ReactApplicationContext reactContext;

public CommunicationInterface(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}

@Override
public String getName() {
return "CommunicationInterface";
}

/**
* Rn 需要调用的方法：
* @param message
*/
@ReactMethod
public void HandleMessage(String message){
Toast.makeText(reactContext,message,Toast.LENGTH_LONG).show();
}

/**
* 发送消息到  RN 界面
*/
public void sendMessage(String params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("mEventName", params);
}
}

2，新建 ReactPackage：

MReactPacakge：

public class MReactPacakge implements ReactPackage {

private List<NativeModule> nativeModules;

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
nativeModules = new ArrayList<>();
nativeModules.add(new CommunicationInterface(reactContext));
return nativeModules;
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}

public NativeModule getInterf(int index) {
if (nativeModules== null)
return null;
return nativeModules.get(index);
}
}

3，Activivty 中添加 我们的 ReactMoudle：

public class Communicate3Activity extends BaseActivity implements DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private MReactPacakge reactPackage;
private static int i = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_communicate3);

mReactRootView = new ReactRootView(this);
reactPackage = new MReactPacakge();
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
//                .setJSMainModuleName("index")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.addPackage(reactPackage)   //添加  本地 moudel
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();

// 注意这里的MyReactNativeApp必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "Communication3", null);

//将  ReactView 模块添加进 布局
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.root_view);
linearLayout.addView(mReactRootView);

//添加  本地按钮的  点击事件：
findViewById(R.id.native_btn).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//向 Rn 发送消息：
if (reactPackage.getInterf(0)!=null){
((CommunicationInterface)reactPackage.getInterf(0)).sendMessage("这是本地发送的消息" + i++);
}
}
});
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}

//Rn 端监听 Android 原生 消息：

componentWillMount(){
DeviceEventEmitter.addListener('mEventName',
this.rnMethod.bind(this));
}

//处理：
rnMethod(params){
this.setState({info:params});
}

// Rn 端 向 原生发送消息：

onPress = ()=> {
// 这样 调用原生端  方法    原生来吐司  CommunicationInterface 是我们在上面定义接口  通信类getName  返回值
NativeModules.CommunicationInterface.HandleMessage("Rn调用 原生 来吐司！！");
}

致此便完成了我们的 简单通信。当然还有其他通信方式下回分解。

如果讲解不够详细：请移步GitHub：https://github.com/zqHero/AndroidKissReactNative

如果对你有用 欢迎fork 和star。 谢谢