一、前言
搭建RN 的环境过程中可能会遇到比较多的坑,要有一个心理准备。我昨天搭建环境的时候,遇到很多的问题,一个问题一个问题的google,到昨天晚上遇到的最后一个问题,始终解决不了,今天又折腾了一天,才弄好。
二、什么是 React Native?
官方解释:
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
大白话:
就是,老板招聘一个会RN 的人,就可以抵得上分别招Android、IOS、前端各一个人,然后就没有然后呢。
作为一个技术人才,技术的知识广度和深度始终是不懈的追求。技术总是超前发展的,你不学习,你不进步,就会慢慢被社会淘汰。
三、开始搭建
1、新建一个 Android 项目
项目名称:RnTest
2、引入React-Native
在你的app目录下的build.gradle加入react-native依赖,我加入的是最新版本的:
compile "com.facebook.react:react-native:+"
然后在AndroidManifest.xml加入访问网络权限,当然一般已经项目都有这个权限,如果有这一步可以忽略:
<uses-permission android:name="android.permission.INTERNET" />
为了让项目支持调试RN,需要在AndroidManifest.xml里面加入RN的DevSettingsActivity,如下:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
这样真机晃动手机或者点击Menu菜单就会打开相关的调试页面,如图下所示:
这里部署完后,还有一个坑,就是React-Native对编译版本和最小编译版本都有要求,它需要app的build.gradle文件的compileSdkVersion为23,minSdkVersion为16,因为我们项目要求最低版本为15甚至更低,这里需要在app的AndroidManifest.xml加入:
<uses-sdk tools:overrideLibrary="com.facebook.react" />
3、实现方式1:引用 ReactRootView
新建一个RnActivity.java:
import com.facebook.react.common.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class RnActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rn);
mReactRootView = (ReactRootView)findViewById(R.id.react_rootview);
findViewById(R.id.back_button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RnActivity.this.finish();
}
});
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED).build();
mReactRootView.startReactApplication(mReactInstanceManager, "RnTest", null);
}
@Override
public void invokeD