React Native之调用安卓原生控件

      在使用React Native（RN） 开发时，由于RN技术比较新，框架与控件相对较少，这时很自然就想到的RN如何调用Native以及如何进行通讯，个人感觉这块是开发必须要掌握的，今后的开发模式肯定是Hybird模式，由于初学，所以先按照文档流程跑通，至于原理后期再研究。

     为了避免发生一些异常，这里友情提示下：将gradle升级成最新版本，不然在你整合的时候有可能会报：Module 0 is not a registered callable module.

   
 这里简单做个安卓自定义Dialog的的示例，来了解下流程：

1.创建一个dialog的module 继承自ReactContextBaseJavaModule

package com.listviewdem;

import android.view.View;

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 plus on 16/7/19.
* 自定义删除对话框-->RN 调用
*/
public class ReactRemoveChannelModule extends ReactContextBaseJavaModule{

public static final String REACT_CLASS = "RCTRemoveChannel";

public ReactRemoveChannelModule(ReactApplicationContext reactContext) {
super(reactContext);
}

@Override
public String getName() {
return REACT_CLASS;
}

//注写 该方法为RN调用方法.
@ReactMethod
public void show(String title, final Callback callback){
final RemoveChannelDialog removeChannelDialog=new RemoveChannelDialog(getCurrentActivity());
removeChannelDialog.show(title);
removeChannelDialog.setPositiveButtonListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
removeChannelDialog.dismiss();
//回调给RN
callback.invoke(true);
}
});
}
}
简单说明下：
getName方法返回的是JS中组件的名称.(模块名前的RCT前缀会被自动移除。)
自定义RN调用的方法。注：需要加上注解@ReactMethod

RemoveChannelDialog是自定义Dialog，对有过安卓开发经验的应该很简单。

2.接下来我们要将创建好的module添加到package中，然后注入该模块。

创建一个类实现ReactPackage接口,在createNativeModules方法中封装好自定义的module。

package com.listviewdem;

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.ArrayList;
import java.util.Collections;
import java.util.List;

/**
* Created by plus on 16/7/19.
* 实现ReactPackage接口封装NativeModule实体。
*/
public class RNJavaReactPackage implements ReactPackage {

//将创建的NativeNModule封装返回
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules=new ArrayList<>();
modules.add(new ReactRemoveChannelModule(reactContext));
return modules;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return new ArrayList<>();
}
}

这里有个诡异的问题，纠结我好久，多亏了群里一个朋友提醒了我，主要是因为相关资料太少，遇到问题无从下手.

在0.29版本以前，我们是通过MainActivity也就是基于ReactActivity加入的，但是在0.29版本以后应该通过MainApplication也就是基于ReactApplication加入的.
package com.listviewdem;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new RNJavaReactPackage()
);
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
到这里我们java端就完成了，后面的就是在RN端如何进行调用.
在RN中，首先引入NativeModules,通过NativeModules获取到我们自定义原生的控件.

var {NativeModules}=require('react-native');
var dialog=NativeModules.RemoveChannel;//原生组件.

/**
长按事件
**/
onLongPress(data){
dialog.show(data.name,(msg)=>{
alert('移除成功');
});
}

这样我们就完成了react native调用Native 控件.是不是很实用.
效果图：


 
   


以上需求对产品而言其实没有多大作用，这里只是简单介绍了下react native 该如何调用安卓原生控件，在实际的项目开发中，应该根据自身项目情况来决定，后续我会将这个完整的项目放到github供大家参考。

RN开发群：527459711.欢迎大伙加入.