React Native之旅—入门

开发App也有几年了，从iOS开始，顺手捡上Android，基本打通了App端，自己也一直维护着一个小项目—我爱运动，由于是纯Native的，每次版本迭代都是先做完iOS端，提交审核，然后再回过头来开发Android端，如是多次后，跨平台的需求就逐渐清晰和强烈起来，于是React Native（以下简称 RN）开始进入我的眼帘。
10月份的时候我还心存侥幸的试了一下BuglyHotfix（JSPatch+Bugly后台，的确方便、好用），妥妥的被苹果打回来了（虽然按照Bugly的demo工程做了一些混淆），进一步促成我React Native之旅的开始。

准备工作

在正式开始前，先查看了一些集成到现有Native工程的文章，当时最新的RN版本是0.49，做了2个demo，一个纯Objective-C（以下简称 OC）的demo工程集成很顺利，一个纯Swift的demo工程就没有那么顺利了，各种折腾（好像工程的入口必须要main.m–>AppDelegate.m这样，只有AppDelegate.swift似乎无法正常读取），最后也没折腾太明白。

旧工程集成-iOS

由于我的iOS工程是Swift为主（入口是Swift的–AppDelegate.swift），OC为辅，加上前面没有彻底解决Swift工程的集成问题，便直接用 react-native init ProjectName 新建了RN项目（iOS工程默认用的OC），并将AppDelegate.swift中的内容搬到AppDelegate.m中，其它文件（包括.swift文件）倒是不用调整，直接Add Files to project即可（Xcode9下直接拖进去可能有问题）。

旧工程集成-Android

在 react-native init 时相应的工程配置已经就绪，所以直接加入原来的那些文件即可（Java文件、资源文件直接复制粘贴，Module重新导入）。

加入RN新内容

用js开发并调试好新内容后，就可以在Native中使用了。
对于iOS，只要获取到对应的RCTRootView就可以很方便的使用了。

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:url moduleName:mName initialProperties:nil launchOptions:nil];
self.view=rootView;

对于Android来说，也基本类似。

ReactRootView reactView = new ReactRootView(Plank_Activity.this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
reactView.startReactApplication(mReactInstanceManager, "mName", null);
setContentView(reactView);
//或者
bgView.addView(reactView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

打包，发布

iOS端和纯Native工程在操作上没什么区别，也是Product–>Archive–>upload。
Android端需要先打包RN，即：将js文件打包到工程的assets目录下，图片打包到drawable目录下等，终端命令如下：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle --assets-dest android/app/src/main/res

然后再Build–>Generate Signed APK–>上传各应用市场 即可。

体会

1、跨平台开发确实挺方便，代码共用率95%以上，用的挺爽的，哈哈；
2、使用体验上还感觉不出与Native的差别（也许是我这一块的功能很简单，可以到 我爱运动中的 运动-平板支撑 模块体验实际效果）；
3、用RN开发全新项目很方便，也方便在任何阶段集成进来已有的Native工程（这点比Xamarin好太多）；
4、引入RN后打出的发布包，包体积增大了，iOS增加了2M左右（还算可以将就），Android增加了13.5M左右（有点不好接受）。
【因为RN的js和加入的图片等资源文件也需要空间–500k以下，所以这里是初步的计算，用了“左右”修饰】
5、引入RN后，Xcode和Android Studio的编译运行速度明显降低了。
6、RN的升级有点难折腾，本想从0.50轻松升级到0.52的，React Native中文网文档里的2种方法都试了，一个都没成功（可能是我打开的姿势不对吧），最后只好曲线救国——重新做了一遍集成。

填坑

RN的使用过程中主要遇到如下几个问题：

1、Android工程报错“libreactnativejni.so”, RTLD_LAZY) failed: dlopen failed: cannot locate symbol _ZSt14__once_functor”
原因：和第三方sdk的so库冲突，可以参考https://github.com/facebook/react-native/issues/14036。
应对：移除第三方sdk中对应的so文件即可。比如我的工程就是和百度地图SDK里的libgnustl_shared.so文件冲突，移除后正常。

2、Android工程报错“unable to load script from assets ‘index.android bundle’,make sure your bundle is packaged correctly or you’re runing a packager server”
原因：assets目录下缺少index.android bundle文件，部分手机会出现这个问题。
应对：加入这个文件即可，终端命令如下：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3、Android使用alert时弹出警告“tried to show an alert while not attached to an activity”
原因：使用RN的Activity内少了几个方法。
应对：加上缺失的方法即可，具体如下：

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}

—全文完——————

最后

以上就是个性彩虹为你收集整理的React Native之旅—入门的全部内容，希望文章能够帮你解决React Native之旅—入门所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。