开发工具:WebStorm,Android Studio(下文简称AS)
开发React Native项目个人还是比较推荐WebStorm,它的操作界面以及快捷键跟AS如出一辙,对于Android开发者来说,使用这款IDE是极好的,哈哈。
作为一个刚开始写技术文章的新手,谢谢各位的鼓励与支持。之所以取名为“特别篇”,其实主要内容不多,就是对以往两篇文章的内容进行归纳与总结,本来打算写关于Android生命周期组件的文章,但想想还是先把前几天,欠下的内容先补上,正所谓“打铁要趁热”,免得以后忘了,废话说到这,开始今天的正文。
前言:
原生应用中嵌入RN可以参考React Native官方中文文档或者参考在Android原生应用中嵌入React Native,在RN中调用Android原生方法可以参考React Native调用Android原生方法,本篇特别的地方就在于如果在Android原生应用中接入RN,RN又要调用Android原生方法,用React Native调用Android原生方法里面的方式注册并申明模块的方法是行不通的,那篇文章方法只是适用于原来项目是RN项目。
一.原生应用嵌入React Native 步骤:
1.创建RN的项目文件夹,在项目目录里创建android文件夹,并将原生Android项目代码拷入/android中;
2.在RN项目文件夹中,创建一个名为package.json的文本文件;
3.在RN项目目录位置打开终端,运行 npm install
,安装RN所需的服务;
4.AS中打开/android中安卓项目,配置对于Maven以及依赖包,在AndroidManifest.xml文件中添加Internet权限,以及需要配置添加的Activity界面;
具体方法参考:在Android原生应用中嵌入React Native
二.RN调用Android原生方法 步骤:
1.创建模块:新建Java Class 让其继承ReactContextBaseJavaModule并实现里面的方法;
2.注册模块:新建Java Class 实现ReactPackage里面的方法【RN官方文档中有三个方法,最近发现只有两个了】;
3.然后将第二步创建Java Class加入到MainApplication.java文件的getPackages方法中;
4.RN中封装模块以及调用;
具体方法参考:React Native调用Android原生方法
区别:
原生Android项目引入RN界面,在RN界面调用注册好Android原生方法,创建以及注册模块方法,参考上文二步骤,但同时也要在上文步骤一的4方法中,展示React Native代码界面的onCreate()方法中,将你创建的注册模块【上文二步骤方法2】添加到ReactInstanceManager.builder()中:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new AnExampleReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", null);
setContentView(mReactRootView);
}
注:上文.addPackage(new AnExampleReactPackage())【AnExampleReactPackage()类就是实现了ReactPackage接口】,同时AnExampleReactPackage()类也要加入MainApplication.java的ReactNativeHost中:
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(), new AnExampleReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
再AS中运行项目,你会发现AS的日志猫里会有你再RN界面的中打印的log日志【以React Native调用Android原生方法中注册的log为例子】