Native项目迁入React-Native过程中遇到的坑(0.4x版本)

转载请注明出处王亟亟的大牛之路

最近都在忙着搭架子,找框架,谈需求和开会。甚至都没有时间好好装逼,昨天帮安卓的小伙把项目从安卓整体迁移到了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?我的答案是,你不在位置上你不能理解,纯原生的人难道就待机?)

  • 变动不大的用Native
  • 跟硬件相关的模块用Native
  • 逻辑复杂但是页面本身不复杂的用RN(这条被产品一个巴掌拍回了,他们不管实现难度)
  • 需要热更的用RN
  • 其他省略

然后原生只剩下以下模块

  • 登陆/注册
  • 支付页面
  • WebView相关页面(这块你懂的,强行拽来的)

迁移iOS

建完项目后先是拽iOS部分

这里写图片描述

基本没有遇到任何阻力,10分钟(分支选择耗费了几分钟)就整完了简单的插了个RN页面,跑起来无异常,iOS Over


迁移Android

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 {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
}

你自己的项目应该还会有jcenter()和公网maven{}相关内容

4.添加摇一摇的Activity

     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

配置级别的内容已经贴完了

5.接下来是测试代码(这部分内容在之前的互相跳转里出现过)

首先要建一个 ReactActivity

import com.facebook.react.ReactActivity;

import javax.annotation.Nullable;

public class RNActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        return "统一的控件名";
    }
}

然后建一个测试用的Module

public class IntentModule extends ReactContextBaseJavaModule {
    public IntentModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        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
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new IntentModule(reactContext));
    }

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

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

在Application里注册关联


public class App extends Application implements ReactApplication {

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    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 MyReactPackage()
            );
        }
    };
}

改完之后上传 git


尝试性调试

git clone git@11.11.111.111:aaa-aaaa/RN_App.git (地址你懂的)
cd RN_App
npm install
react-native start
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
react-native run-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' }

相关文章:https://github.com/facebook/react-native/issues/11680


坑2 js bundle打不进项目,也就是 Js Server跑起来了,react-native run-android包是打了,但是他喵的js没打进去(我也不知道怎么日狗了)

方法1,打本地包(offline姿势)

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

路径根据你的具体项目而定

方法2,打js服务的包,也就是我上面提到的

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

结果会打一个bundle出来


这里写图片描述

坑3 摇了没反应

这个问题我还没解决,或者说没时间解决,交给给小伙们去干了(一般是手机弹窗的授权问题相关)


坑4 执行 react-native run-android 安装成功后 Activity class does not exist

这里写图片描述

已知的错误场景:http://stackoverflow.com/questions/35131769/error-type-3-activity-class-com-awesome-project-com-awesome-project-mainactiv

具体的错误来源于项目的MainActivity不在根目录。

方法1,迁移MainActivity.class
不解释了,字面意思

方法2,改运行的脚本

其实也就是修改runAndroid.js

他在node_modules.react-native/local-cli/runAndroid/runAndroid.js

修改方式也很简单,path肯定是拼接的,找到拼的代码改了就行


这里写图片描述

最佳解决指南:https://github.com/facebook/react-native/issues/5546

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容