2. 程式人生 > >React-Native開發二 Android 已有專案整合React-Native

React-Native開發二 Android 已有專案整合React-Native

阿新 • • 發佈：2018-11-01

1 前言

之前寫過一篇RN的環境搭建教程和新建一個新的RN專案的文章
https://blog.csdn.net/qiyei2009/article/details/78820207
但是其實在實際開發中，在已有的android專案中整合RN情況更普遍，這篇文章就是一個怎麼在已有Android專案中引入RN的例子

2 整合步驟

首先搭建好Android開發環境，並有一個新建的或者已經存在的Android專案
在未建立ReactNative專案大概是這個樣子
這裡寫圖片描述
接著建立ReactNative Module用於存放我們RN相關的內容，極大程度的與原生開發解耦

1 在應用中新增js程式碼


在專案根目錄輸入以下命令

npm init

這裡寫圖片描述
在這中間要求輸入包名，其他的預設即可
這一步完成之後，在專案的根目錄下就會生成package.json這個檔案
接下來還需要把啟動指令碼放進去：

"start": "node node_modules/react-native/local-cli/cli.js start"

注意下啟動指令碼的路徑，如果整合的專案目錄結構不一樣的話會報找不到啟動指令碼之類的錯誤，到時根據具體目錄結構修改就好了。

2 安裝React 和React Native
根目錄輸入以下命令

npm install --save react react-native

這裡寫圖片描述
大約一兩分鐘的樣子（如果卡到這裡了，看看安裝時是不是忘了配置映象），完成之後你的根目錄下會多了一個node_modules的資料夾，裡面存放了下載好的React 和React Native。

要是控制檯輸出了版本不一致的警告資訊，例如：

npm WARN [email protected]0.45.1 requires a peer of [email protected]16.3.1 but none was installed.

則繼續執行 npm i -S [email protected] (這裡版本跟警告資訊一致)。
這裡寫圖片描述

3 下載.flowconfig檔案(非必須)

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

第三步curl命令，其實質是下載.flowconfig配置檔案，這個檔案用於約束js程式碼的寫法。非必需，可
這裡寫圖片描述

4 新建index.android.js
專案根目錄下建立index.android.js檔案，目錄內容如下：

'use strict';
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class EssayJokeReactNativeDemo extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, EssayJoke React-NativeDemo</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
AppRegistry.registerComponent('EssayJokeReactNativeDemo', () => EssayJokeReactNativeDemo);

到這裡js部分的都弄的差不多了，現在來看整個專案的目錄結構如下：
這裡寫圖片描述
這裡寫圖片描述
之前將CordovaDemo改成了Cordova，其他的沒有變
ReactNative Module就是我們ReactNative相關開發的內容都放在該module下

5 ReactNative Module引入依賴RN依賴
在build.gradle引入以下依賴

def com_facebook_react_react_native = "com.facebook.react:react-native:+"
api com_facebook_react_react_native // From node_modules.

在專案根目錄build.gradle新增依賴倉庫地址

allprojects {
    repositories {
        …
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

這裡maven路徑官網上寫的是 r o o t D i r / . . / n o d e m o d u l e s / r e a c t − n a t i v e / a n d r o i d ， 這 個 跟 目 錄 結 構 有 關 ， 跟 我 一 樣 在 根 目 錄 上 操 作 的 話 是 不 需 要 rootDir後面的..的，它指的路徑就是專案根目錄下的node_modules下的路徑

6 新建Activity作為原生與RN的跳轉
在較老的RN版本中，我們新建一個Activity實現DefaultHardwareBackBtnHandler介面，大體類似下面

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意這裡的HelloWorld必須對應“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一個引數
        mReactRootView.startReactApplication(mReactInstanceManager, "test", null);

        setContentView(mReactRootView);
    }

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

較新的RN版本，例如RN0.55 我們直接繼承ReactActivity即可

/**
 * @author Created by qiyei2015 on 2018/6/8.
 * @version: 1.0
 * @email: [email protected]
 * @description:
 */
public class ReactNativeDemoActivity extends ReactActivity{

    private static final String MAIN_COMPONENT = "EssayJokeReactNativeDemo";


    /**
     * 返回在index.android.js 中註冊的元件名
     * @return
     */
    @Nullable
    @Override
    protected String getMainComponentName() {
        return MAIN_COMPONENT;
    }

}

新建一個Activity，讓其繼承ReactActivity，並重寫getMainComponentName(),返回我們在index.android.js
中註冊的HelloWorld這個元件。

在Application中初始化一下

/**
 * Email: [email protected]
 * Created by qiyei2015 on 2017/5/8.
 * Version: 1.0
 * Description:
 */
public class BaseApplication extends Application implements ReactApplication{
    private static final String TAG = " Sophix";

    /**
     * ReactNative的host
     */
    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()
            );
        }
    };


    @Override
    public void onCreate() {
        super.onCreate();
        ....
    }

    /**
     * ReactNative的host
     * @return
     */
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    ....
}

在manifest.xml配置如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.qiyei.reactnative">

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

</manifest>

由於需要訪問 DevSettingsActivity 介面，也需要在 AndroidManifest.xml 中宣告

7 同步編譯
該步驟可能會遇到以Warning:Conflict with dependency ‘com.google.code.findbugs:jsr305’. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.ild.bundle裡面加入：

allprojects {
    ...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
    }
}

8 在ReactNative Module新建assets目錄
主要用於儲存一些bundle檔案

3 執行專案

有了以上準備，我們就直接來執行專案吧
1 啟動server
在根目錄下輸入以下命令

npm start

或者

react-native start

都可以啟動後臺服務
這裡寫圖片描述

如果卡在了以上介面，直接在根目錄下執行以下命令

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

注意，需要將index.android.bundle生成的目錄指定對
這裡寫圖片描述
完成之後assets目錄下會生成以下兩個檔案
這裡寫圖片描述
2 監測server是否可以訪問
在電腦的瀏覽器中訪問以下地址，如果可以訪問，一般來說server就啟動成功了

http://localhost:8081/index.android.bundle?platform=android

3 執行APP
點選跳轉到RN介面，執行效果如下：
這裡寫圖片描述
注意，執行過程中可能會有一些不順利的地方，可以搜尋網路上的答案解決

原始碼參考 https://github.com/qiyei2015/EssayJoke 中ReactNative部分

相關推薦

React-Native開發二 Android 已有專案整合React-Native

1 前言 之前寫過一篇RN的環境搭建教程和新建一個新的RN專案的文章 https://blog.csdn.net/qiyei2009/article/details/78820207 但是其實在實際開發中，在已有的android專案中整合RN情況更普遍，這篇文章就是一個怎麼在已有

基於已有專案整合webpack配合babel支援es6轉碼壓縮

需求： 在已有的專案基礎上整合webpack，babel支援es6轉碼壓縮 想要單獨使用請參考 1.單獨使用webpack壓縮程式碼 [https://seg

［React-native］第一行程式碼Helloworld及整合已有專案的方案

一、參考官方文件點選開啟連結寫了第一個文件hello world 程式碼如下： 初始化一個專案HelloWorld，進入Helloworld資料夾，執行命令： react-native init HelloWorld 得到資料夾中檔案： 修改index.android.

React-Native集成到已有項目中的總結

could not rom 浮窗 js文件 命令行 led align nba handle 安裝Python 從官網下載並安裝python 2.7.x（3.x版本不行） 安裝node.js 從官網下載node.js的官方V6.X.X版本或更高版本。安裝完成後

window下Android專案整合React Native的正確姿勢

      React Native的專案中分為Android與IOS，但是若在現有的Android專案中，整合RN，不能按照那個包結構來，我們統一在app資料夾下處理。 一、整合步驟：    1.新增js檔案   &n

Android原生專案整合React Native

剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入

使用react-native開發後Android和IOS的安裝、打包和上線

一、安卓 1、執行、打包和安裝 dev模式  在根目錄下面執行  react-native run-android 打包執行命令：cd sh 然後執行 ./build-andro

Android原生專案整合React Native踩坑記

最近在學習React Native，將Android原生專案整合React Native實現混合開發。參考官網和其他一些相關資料，自己動手一步一步操作，發現真的是一步步踩坑再填坑的過程，此文章記錄整合React Native的步驟和出現的問題，方便以後查閱。

React Native開發學習筆記——WebStorm執行專案

如何在webStorm上進行真機除錯？下邊以執行Android為例。ios有不同的地方。   除錯分兩步： debug配置。 執行。 debug配置 點選Edit Config

EAS開發之對已有單據的增刪查改功能開發

文件 過去 開發 cor 文件中 傳輸 代碼 factory 列表 一：對於一個已經在其他業務部門定義好的業務單元，在另一個部門新增該業務單元的增刪查改操作，應該怎麽做？ 由於業務單元已經定義過了，所以我們不能再進行建模、定義單據ui。而是要開發出一個單據列表展

已有專案提交到git

1、（先進入專案資料夾）通過命令 git init 把這個目錄變成git可以管理的倉庫 git init 2、把檔案新增到版本庫中，使用命令 git add .新增到暫存區裡面去，不要忘記後面的小數點“.”，意為新增資料夾下的所有檔案 git add . 3、用命令

Intellij IDEA通過SVN匯入基於Springboot的maven專案以及對已有專案做更新

一.匯入外部maven專案 點選“+”，輸入SVN地址並下載專案 彈出視窗，選擇new window（自己覺得哪個好就選哪個） 等待執行完畢，執行完後會出現以下情況，就需要配置一下你的maven庫了 配置Maven 彈出視窗，選擇new window（自己覺得哪個好就選哪個） 配置

碼雲上上傳已有專案

 首先，碼雲上建立一個空專案   得到 專案地址 xxxxx.git   git init  git remote add origin xxxxx.git git pull

Unity3D 虛擬現實開發(二)-Android釋出設定

大家好！又見面了，下面我們來學習一下，Unity3D移動開發，由於本人沒有Mac蘋果裝置，所以只能用開源的安卓了。如果大家在安卓上執行沒問題，那麼在蘋果機器上也就沒問題。蘋果的釋出流程就自己查找了。 一、安卓的裝置釋出首先要設定JDK及安裝 androidSDK、NDK。  

Git初始化本地已有專案,並推送到遠端Git倉庫操作

Git初始化本地已有專案,並推送到遠端Git倉庫操作 1. 建立本地專案，在專案根目錄執行git init命令 git init 2. 在git伺服器上建立一個倉庫，這裡使用GitHub建立一個倉庫。 例如這個git倉庫 https://github.com/ios-z

區塊鏈技術開發怎麼結合已有產業鏈落地？

俗話說得好“站在風口上，豬都會風”，那麼2018年最大風口無疑是“區塊鏈”，區塊鏈處在發展的初期，很多技術和商業模式還在探索之中。很多暴富神話、不可思議的逆襲創富，在區塊鏈行業中經常耳熟能詳，那麼如何在已有的產業鏈上來結合區塊鏈呢？怎麼打造屬於自己的區塊鏈產業鏈形式？ 區塊鏈各種專案相繼出現，發行區塊鏈幣的

如何根據已有專案下lib包裡jar檔案快速生成maven的pom.xml 裡面所有依賴

想將一個web專案轉成Maven專案，在lib資料夾下，jar包較多的時候，就需要高效快速的生成其對應依賴來完成快速開發。那麼你就來對地方了。 話不多說，直接上乾貨。 import java.io.File; import java.io.FileInputSt

將本地已有專案 新增到 git管理中去

首先： 在 gitoschin 上面新建一個空的專案， 2 在本地目錄下 ，開啟黑視窗   3 。git init  把專案初始化後     git add .    把專案的所有檔案加入暫存區 git commit -am '專案的這初始化'      把專案提交

Git 2 ---已有專案引入

2018年11月08日 16:09:55 c123m 閱讀數：5 個人分類： 開發工具

微信小程式匯入已有專案

1.雙擊“微信web開發者工具”：2.選擇“小程式專案”：3.會出現管理專案，和一個+號：在管理專案中有個“新增”，也可以點選+號：4.會出現新增頁面，選擇專案目錄，填入專案名稱以及appId5.可以選擇無appId點選確認，就將專案匯入成功了。注：需要選擇目錄為src原始碼