最近都在忙着搭架子,找框架,谈需求和开会。甚至都没有时间好好装逼,昨天帮安卓的小伙把项目从安卓整体迁移到了 RN 的项目下面,过程中遇到很多不可描述的坑,这里给大家分享下经验
先安利,安卓收纳库: https://github.com/ddwhan0123/Useful-Open-Source-Android
React-Native 收纳库: https://github.com/ddwhan0123/Useful-Open-Source-React-Native
项目刚开始的阶段我还不在场 (最初的 app 完全没有 RN/Weex 的相关模块),然后在我到岗后产品发现了, React-Native 的 "美好",决定把原有的项目重构,7 成的业务量迁移到 React-Native 模块。
重构开始前的人员配比 Android: 2 人 iOS: 4 人 前端:1 名 (会 vue, 会一点 React,完全没摸过 RN 的)
过去一个月后 Android: 3 人 (有一个能写点简单 RN 页面) iOS: 3 人 (原有的一个被我拽去强行干 RN 了) 前端:3(会 React/Vue 不会 RN)+2(RN 选手,会用 Redux 等第三方 RN 库)+1(iOS 被强拽的小伙)
在分页面之初和产品砍了砍准则 (很多人觉得奇怪,既然如此为什么不用纯 RN?我的答案是,你不在位置上你不能理解,纯原生的人难道就待机?)
然后原生只剩下以下模块
建完项目后先是拽 iOS 部分
基本没有遇到任何阻力,10 分钟 (分支选择耗费了几分钟) 就整完了简单的插了个 RN 页面,跑起来无异常,iOS Over
android 长这样 (自己项目各有差异,这个无所谓了,反正改安卓, 改的不是目录是 Gradle 配置)
1. 首先是查看授权,有就算了,没有就加
- <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"
- />
- <uses-permission android:name="android.permission.INTERNET" />
两个必要的授权加一下,一个是弹窗,一个是网络
2. 项目文件的 dependencies 里加上 RN 的依赖
- compile 'com.facebook.react:react-native:+' // From node_modules
3.android.gradle 里添加本地 Maven 的依赖
- allprojects {
- repositories {
- mavenLocal()
- maven {//AllofReact Native (JS, Obj-C sources, Android binaries)isinstalled fromnpmurl"$rootDir/../node_modules/react-native/android"}
- }
你自己的项目应该还会有 jcenter() 和公网 maven{} 相关内容
4. 添加摇一摇的 Activity
- <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"
- />
配置级别的内容已经贴完了
5. 接下来是测试代码 (这部分内容在之前的互相跳转里出现过)
首先要建一个 ReactActivity
- importcom.facebook.react.ReactActivity;importjavax.annotation.Nullable;public class RNActivity extends ReactActivity{
- @Nullable
- @Override
- protectedStringgetMainComponentName() {return "统一的控件名";
- }
- }
然后建一个测试用的 Module
- public class IntentModule extends ReactContextBaseJavaModule{
- public IntentModule(ReactApplicationContext reactContext) {super(reactContext);
- }@Override
- publicStringgetName() {return "IntentModule";
- }@ReactMethod
- public void getDataFromIntent(Callback success, Callback error) {try{
- Activity currentActivity = getCurrentActivity();
- String result = currentActivity.getIntent().getStringExtra("result");//会有对应数据放入
- if(!TextUtils.isEmpty(result)) {
- success.invoke(result);
- }
- }catch(Exception ex) {
- error.invoke(ex.getMessage());
- }
- }
- }
添加注册到 Application 里去的 Package
- public class MyReactPackage implements ReactPackage{
- @Override
- publicList createNativeModules(ReactApplicationContext reactContext) {returnArrays.asList(newIntentModule(reactContext));
- }@Override
- publicList> createJSModules() {returnCollections.emptyList();
- }@Override
- publicList createViewManagers(ReactApplicationContext reactContext) {returnCollections.emptyList();
- }
- }
在 Application 里注册关联
- public class App extends Application implements ReactApplication{
- @Override
- public void onCreate() {super.onCreate();
- SoLoader.init(this,/* native exopackage */ false);
- }@Override
- publicReactNativeHostgetReactNativeHost() {returnmReactNativeHost;
- }private finalReactNativeHost mReactNativeHost =newReactNativeHost(this) {@Override
- public boolean getUseDeveloperSupport() {returnBuildConfig.DEBUG;
- }@Override
- protectedList getPackages() {returnArrays.asList(
- newMainReactPackage(),newMyReactPackage()
- );
- }
- };
- }
改完之后上传 git
- git clone git@11.11.111.111:aaa-aaaa/RN_App.git (地址你懂的)
- cdRN_App
- npminstall
- react-nativestart
- curl"http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
- react-nativerun-android
在 ok 的情况下,跳转完会长这样
看上去是不太复杂但是,实质上遇到很多操蛋的问题,我在这里给大家罗列下
坑 1: okhttp3.6 那些事
RN 0.43 用的是 ok http3.4.1 但是项目中用到了 3.6.0 然后在 websocket api 的地方有兼容问题 (当时心里简直操蛋) 解决方法
主项目添加兼容的 dependencies 设置
- configurations.all {
- resolutionStrategy.force 'com.squareup.okhttp3:okhttp:3.4.1'
- }
来源: http://blog.csdn.net/ddwhan0123/article/details/70853448