Android 集成React Native 到現(xiàn)有的項(xiàng)目踩坑記錄

cnio 發(fā)布于2019-08-23 10:30 / 2767人閱讀

摘要：運(yùn)行新應(yīng)用的采坑記錄指定和的版本。這個(gè)軟件很好用設(shè)置支持的庫架構(gòu)把原生項(xiàng)目拷貝到項(xiàng)目的目錄下上面步驟可以運(yùn)行一個(gè)的簡單項(xiàng)目，接下來時(shí)怎么集成到現(xiàn)有的項(xiàng)目項(xiàng)目結(jié)構(gòu)如下我們做的話，是用打開這個(gè)目錄的。

集成步驟

官方文檔：https://facebook.github.io/react-native/docs/0.54/integration-with-existing-apps
借鑒博客：https://blog.csdn.net/u012455...

（1）配置react-native的開發(fā)環(huán)境
（2）創(chuàng)建一個(gè)react-native 的項(xiàng)目
（3）把項(xiàng)目中的android目錄里面的東西換成現(xiàn)有的項(xiàng)目
（4）配置android項(xiàng)目的build.gradle文件以及各種依賴
（5）運(yùn)行項(xiàng)目，運(yùn)行服務(wù)，設(shè)置ip端口調(diào)試。
（6）各種踩坑問題，比如不支持64位手機(jī)的so庫問題，找不到服務(wù)，由于react native 版本問題導(dǎo)致的各種錯(cuò)誤等等

官方文檔的集成步驟；
1、安裝 node.js python2 jdk 8
這個(gè)安裝過程就不說了。網(wǎng)上一大堆
2、下載更新React Native CLI
命令：npm install -g react-native-cli
執(zhí)行這行命令就可以使用react-native 命令了。比如使用命令運(yùn)行
3、android 環(huán)境配置和模擬器或者手機(jī)連接
由于我是做android的，所以這些就跳過了，不清楚的看官方文檔或者上網(wǎng)查
4、創(chuàng)建新的應(yīng)用程序
重點(diǎn)來了，創(chuàng)建應(yīng)用的時(shí)候執(zhí)行命令：react-native init AwesomeProject 這里的AwesomeProject是項(xiàng)目名稱可以隨便換，但是必須以字母開頭。由于下載是在國外所以特別慢，所以我們要添加以下國內(nèi)鏡像。

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

這兩個(gè)都可以，會(huì)顯著提高下載速度。設(shè)置了鏡像，然后再執(zhí)行創(chuàng)建的命令。
5、運(yùn)行新應(yīng)用的采坑記錄
指定react 和react-native 的版本。
項(xiàng)目目錄下的 node_modules 文件夾是 reactnative 所依賴的js的一些東西。
如果沒有，我們可以再項(xiàng)目跟目錄執(zhí)行 npm install 命令下載
這個(gè)時(shí)候我們要注意一下版本號，因?yàn)檫@里遇到坑了。目前最新的react--native可能是0.56 會(huì)出現(xiàn)一個(gè)bug
比如最新版本

react-native-cli: 2.0.1
react-native: 0.56.0

但是運(yùn)行的時(shí)候出現(xiàn) Unable to resolve module "AccessibilityInfo" 這個(gè)錯(cuò)誤，所以建議還是版本低一點(diǎn)，這里使用穩(wěn)定版

切換步驟：
（1）先將舊版卸載

npm uninstall -g react-native-cli
npm uninstall -g react-native

（2）再安裝指定版本

npm install -g [email protected]
npm install -g [email protected]

可以再項(xiàng)目初始化的時(shí)候指定下，不指定的話，只要版本對也沒問題，自己查看下

react-native init --version="0.55.4" myFirstApp

6、解決紅屏錯(cuò)誤：Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”
如果出現(xiàn)上面錯(cuò)誤執(zhí)行下面命令

npm install --save-dev [email protected]

7、解決 React_Native 無法運(yùn)行再64位機(jī)器上
"/data/data/com.xxx.xxx/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit 這個(gè)錯(cuò)誤
參考文章：https://blog.csdn.net/u013531824/article/details/53931307
Android不能同時(shí)加載32和64位本機(jī)庫。如果您至少有一個(gè)依賴庫使用ARM64支持編譯的擴(kuò)展，而另外一些依賴庫僅支持ARM32，就會(huì)出現(xiàn)問題。系統(tǒng)將檢測ARM64依賴關(guān)系，加載它，然后拒絕加載僅ARM32的so庫，就可能導(dǎo)致應(yīng)用程序崩潰。
所以，要再項(xiàng)目中excute 64位的幾個(gè)so庫，使用32位的。
這個(gè)根據(jù)不同項(xiàng)目設(shè)置，查一下自己項(xiàng)目用到了哪些64位的so庫，都設(shè)置一遍
我的項(xiàng)目需要移除這些，然后就不報(bào)錯(cuò)了。Native Libs Monitor 這個(gè)軟件很好用

     ndk {
            //設(shè)置支持的SO庫架構(gòu)
            abiFilters "armeabi", "x86", "armeabi-v7a", "x86_64", "arm64-v8a"
        }

        packagingOptions {
            exclude "lib/arm64-v8a/libgnustl_shared.so"
            exclude "lib/arm64-v8a/libijkffmpeg.so"
            exclude "lib/arm64-v8a/libijkplayer.so"
            exclude "lib/arm64-v8a/libijksdl.so"
            exclude "lib/arm64-v8a/libimagepipeline.so"
            exclude "lib/arm64-v8a/librtmp-jni.so"

        }

8、把a(bǔ)ndroid 原生項(xiàng)目拷貝到reactnative 項(xiàng)目的android 目錄下
上面步驟可以運(yùn)行一個(gè)react-native 的簡單項(xiàng)目，接下來時(shí)怎么集成到現(xiàn)有的Android 項(xiàng)目
react-native 項(xiàng)目結(jié)構(gòu)如下：

我們做android的話，是用Android studio 打開 android 這個(gè)目錄的。
6、修改gradle 的依賴配置
dependencies {}閉包下所有的compile 替換位implementation 或者api因?yàn)槲业腁ndroid studio是3.1.3，老報(bào)錯(cuò)說compile 2018年底要?jiǎng)h除已廢棄。另外我的gradle是4.4 build gradle 工具是3.1.3
（1）Android 項(xiàng)目根目錄的 build.gradle文件修改
如下：如果還是不行，建議跟我一樣，加上google(). .可能如果是最新版 jencter有問題，用的時(shí)候調(diào)整下順序試一試。盡量不要用最新版本的react-native

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
        //添加這個(gè)maven地址，不然無法下載 react-native庫
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

再app 的build.gradle 中添加依賴
使用api 或者implementation 都可以，這里我也制定了版本。

dependencies {
.........
api "com.facebook.react:react-native:0.55.4"
}

7、配置權(quán)限


//我還要添加一個(gè)權(quán)限，建議也添加了

再調(diào)試的時(shí)候我們一般需要訪問DevSettingsActivity，所以也需要添加到AndroidManifest.xml：
手機(jī)搖一搖，或者菜單，設(shè)置電腦服務(wù)的ip地址和端口要用到

8、代碼集成
剛剛創(chuàng)建的最簡單的react-native 已經(jīng)有了。我們就再我們Android 項(xiàng)目中加載這個(gè)最簡單的頁面

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private final int OVERLAY_PERMISSION_REQ_CODE = 1;
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //這里不加權(quán)限判斷 6.0或以上機(jī)型會(huì)閃退
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }


        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                //這是設(shè)置assets目錄下的打包過的js文件名 這個(gè)文件可用命令生成 但調(diào)試期間我們使用npm server動(dòng)態(tài)注入 發(fā)布時(shí)才將它打進(jìn)assets
                .setBundleAssetName("index.android.bundle")
                //這里設(shè)置js入口文件 舊一點(diǎn)的api可能是setJSMainModuleName 但我的版本是0.51.0 取而代之的是setJSMainModulePath方法
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意這里的“FirstApp”必須
        // 對應(yīng)index.js”中的“AppRegistry.registerComponent()”的第一個(gè)參數(shù)值
        // 對應(yīng)“package.json”中的“name”屬性值
        // 最好也將“app.json”中的“name”和“displayName”改成它
        mReactRootView.startReactApplication(mReactInstanceManager, "FirstApp", null);
        setContentView(mReactRootView);

    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {

                }
            }
        }
    }
    @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
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }
    @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);
    }
}

以上是我的activity，大概意思和官網(wǎng)一樣。。代碼直接復(fù)制就行，需要注意的是：
代碼制定的文件名一定要和配置文件中的一致，要檢查
app.json中的name和displayName屬性值
ndex.js中registerComponent的第一個(gè)參數(shù)值
package.json中的name屬性值
這幾個(gè)值要保持一致

9、在真機(jī)上運(yùn)行項(xiàng)目
直接在 reat-native 項(xiàng)目根目錄運(yùn)行命令 react-native run-android , 跳轉(zhuǎn)到上面activity
然后運(yùn)行起來如果是紅屏，說是連不上服務(wù)，就搖一搖手機(jī)，選擇 Debug server host 啥的，設(shè)置電腦的ip:8081 這樣就能打開了。
或者，直接用Android studio 運(yùn)行自己的Android 項(xiàng)目，跳轉(zhuǎn)到上面react 的activity ，也可以是fragment的。
如果出現(xiàn)錯(cuò)誤，繼續(xù)百度谷歌解決。。。有坑是肯定的嘛。先記錄這些

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96410.html

發(fā)表評論

登陸后可評論

0條評論

cnio

男|高級講師

我要關(guān)注我要私信

TA的文章

C/C++游戲項(xiàng)目詳細(xì)教程：《黃金礦工》

閱讀 1896·2021-11-11 16:55
Captura – 免費(fèi)錄屏軟件安裝體驗(yàn) 可選擇安裝版或便攜版

閱讀 2105·2021-10-08 10:13
html+css 實(shí)現(xiàn)導(dǎo)航欄文字居中

閱讀 755·2019-08-30 11:01
你不知道的CSS

閱讀 2166·2019-08-29 13:19
CSS 選擇器

閱讀 3293·2019-08-28 18:18
業(yè)務(wù)，程序員都是怎么做好的

閱讀 2631·2019-08-26 13:26
Javascript事件循環(huán)機(jī)制以及渲染引擎何時(shí)渲染UI

閱讀 588·2019-08-26 11:40
ES6—字符串模板引擎（4）

閱讀 1879·2019-08-23 17:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Android 集成React Native 到現(xiàn)有的項(xiàng)目踩坑記錄

相關(guān)文章

react native 實(shí)現(xiàn)類似QQ的側(cè)滑列表效果

發(fā)表評論

0條評論

cnio

男|高級講師

TA的文章

C/C++游戲項(xiàng)目詳細(xì)教程：《黃金礦工》

Captura – 免費(fèi)錄屏軟件安裝體驗(yàn) 可選擇安裝版或便攜版

html+css 實(shí)現(xiàn)導(dǎo)航欄文字居中

你不知道的CSS

CSS 選擇器

業(yè)務(wù)，程序員都是怎么做好的

Javascript事件循環(huán)機(jī)制以及渲染引擎何時(shí)渲染UI

ES6—字符串模板引擎（4）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Android 集成React Native 到現(xiàn)有的項(xiàng)目踩坑記錄

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！