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

1. 安裝Python

   • 從官網下載並安裝python 2.7.x（3.x版本不行）

2. 安裝node.js

   • 從官網下載node.js的官方V6.X.X版本或更高版本。安裝完成后檢測是否安裝成功：node -v
     安裝完node后建議設置npm鏡像以加速后面的過程（或使用科學上網工具）。
     npm config set registry https://registry.npm.taobao.org --global
     npm config set disturl https://npm.taobao.org/dist --global

3. 安裝react-native命令行工具

   • npm install -g react-native-cli
      安裝完yarn后同理也要設置鏡像源：

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

4. 在Android Studio的歡迎界面中選擇Configure | SDK Manager。

   • 以下為必選
     • 在SDK Platforms窗口中，選擇Show Package Details，然后在Android 6.0 (Marshmallow)中勾選Android SDK Platform 23
     • 在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須是這個版本）。然后還要勾選最底部的Android Support Repository.

5. 配置ANDROID_HOME環境變量

   • 確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。
     打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建，建議在系統變量中修改
     
     • PATH設置

       把Android SDK的tools和platform-tools目錄添加到PATH變量中:

       PATH -> 雙擊進行編輯

       

6. 集成到已有的APP中

   1. 安裝組件

      • 進入https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
        參照文檔 Prerequisites集成

        

        • 在Terminal中的app根目錄或者通過開始菜單，運行命令行，定位到項目所在目錄

        

        依次執行以下命令行：
        $ npm init
        $ npm install --save react react-native
        $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
        ps:

        1.npm init命令用來生成package.json文件。根據提示輸入name(不能包含大寫字母)，版本，描述，entry point（入口文件）等，可回車使用默認值。

        2.npm install --save react react-native命令要花費幾分鍾，當前版本默認安裝 [e-mail].x

        也可以安裝制定版本，如執行$ npm install --save react-native@0.42.0 此命令行將生成

        /node_modules 文件夾. 該文件夾用來存放項目中的avaScript 依賴

        安裝完畢，按提示要求安裝相應版本的react

        3.前面5個步驟完成后，當出現下面提示時，重啟Android studio

        'npm' 不是內部或外部命令，也不是可運行的程序
        或批處理文件。

         

        

         

        $ npm install react@x.0.0-alpha.x

         

        

        此警告可忽略

         

        3.當出現下面提示，需安裝curl，否則請跳過

        

        https://curl.haxx.se/dlwiz/?type=bin&os=Win64&flav=-&ver=*&cpu=x86_64下載v7.54.0

        windows 64位 的系統，可以使用I386下的curl.exe工具

        　在系統高級環境變量中，配置

        　　CURL_HOME ----- "你的curl目錄位置\curl-7.54.0"

        　　path ---- 末尾添加 “;%CURL_HOME%\I386”

   2. js配置

      • 打開package.json 文件在 scripts中添加： 
        "start": "node node_modules/react-native/local-cli/cli.js start"
      • 在工作空間新建index.android.js文件，

      • 

        打開index.android.js文件，拷貝以下內容，測試“Hello, World”

         1 'use strict';
         2 
         3 import React from 'react';
         4 import {
         5   AppRegistry,
         6   StyleSheet,
         7   Text,
         8   View
         9 } from 'react-native';
        10 
        11 class HelloWorld extends React.Component {
        12   render() {
        13     return (
        14       <View style={styles.container}>
        15         <Text style={styles.hello}>Hello, World</Text>
        16       </View>
        17     )
        18   }
        19 }
        20 var styles = StyleSheet.create({
        21   container: {
        22     flex: 1,
        23     justifyContent: 'center',
        24   },
        25   hello: {
        26     fontSize: 20,
        27     textAlign: 'center',
        28     margin: 10,
        29   },
        30 });
        31 
        32 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
        
        

        第二個HelloWorld是展示的頁面

        • 在app build.gradle文件dependencies 中添加

        1 dependencies {
        2     ...
        3     compile "com.facebook.react:react-native:0.xx.x" // From package.json.
        4 }

        • In your project's build.gradle中"allprojects" block:repositories下添加

        1 maven {
        2    // All of React Native (JS, Android binaries) is installed from npm
        3             url "$rootDir/../node_modules/react-native/android"
        4 }

        ps:/..此處官方英文文檔是個坑，百度好久，用來設置node_modules的父目錄，如果在根目錄下直接刪掉，如果你很執着，同步后，就會報錯：
        “Failed to resolve: com.facebook.react:react-native:0.x.x"
        • 在主app清單文件中添加DevSettingsActivity和訪問網絡權限：
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
        <uses-permission android:name="android.permission.INTERNET"/>

   3. 添加js入口MyReactActivity

      app中頁面跳轉，內容如下：

      • public class MyReactActivity extends Activity 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)//true
                        .setInitialLifecycleState(LifecycleState.RESUMED)
                        .build();
                mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        //"HelloWorld"需和index.android.js中方法 AppRegistry.registerComponent()第一個參數保持一致
                setContentView(mReactRootView);
            }
        
            @Override
            public void invokeDefaultOnBackPressed() {
                super.onBackPressed();
            }
        }

        清單文件中聲明及相關主題設置：

      • <activity
          android:name=".MyReactActivity"
          android:label="@string/app_name"
          android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        </activity>

   4. 啟動js服務器

      $ npm start

 

 

出現下面提示后

 

終於可以運行了···結果屏幕紅了， 報錯行：

com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly

 

• • 
  • 原因：沒有找到執行的bundle文件。
    兩種解決方式：

1. 修改項目中的package.json文件

   1. • 在scripts模塊，添加bundle-android,如圖 

        

         

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

        ps:/...為你的app,“--”為兩個“-”
2. 使用命令行直接生成

不用修改package.json，不管有沒有bundle-android模塊

在Terminal窗口直接執行下面命令：

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

當出現下面提示后，說明ok

assets下生成兩個文件：

 

搖晃設備，reload js,是不是就大功告成了?結果屏幕繼續飄紅：

 

com.facebook.react.devsupport.DebugServerException: Could not connect to development server.

 

解決辦法：點擊Reload(R,R),打開調試菜單，點擊Dev Settings，選Debug server host for device，輸入你的正在運行packager的那台電腦的局域網IP加:8081（同時要保證手機和電腦在同一網段，且沒有防火牆阻攔），再按back鍵返回，再按Menu鍵，在調試菜單中選擇Reload JS，就應該可以看到運行的結果了。

 

終於出現“Hello, World”頁面了。汗啊，費了好大勁···

 

 　　　　本文為博主原創文章，請尊重版權，未經博主允許不得轉載，轉載請注明出處：http://www.cnblogs.com/details-666/p/RN.html

附：查詢電腦ip地址命令：ipconfig/all

連接網線時，采用

 

連接wifi時，采用

 

 

補充：

Q:Caused by: java.lang.IllegalAccessError: tried to access method android.support.v4.net.ConnectivityManagerCompat.:(Lcom/facebook/react/bridge/ReactApplicationContext;)V from class com.facebook.react.modules.netinfo.NetInfoModule

A:將項目的appcompat的版本改成23.0.1就好了

compile 'com.android.support:appcompat-v7:23.0.1'

 

安裝老版導航命令

npm install react-native-tab-navigator --save

安裝最新導航組件

npm install --save react-navigation

 

如果真實設備白屏但沒有彈出任何報錯，可以在安全中心里看看是不是應用的“懸浮窗”的權限被禁止了。

 

問題先總結到這里，發現問題繼續補充。