could not rom 浮窗 js文件 命令行 led align nba handle

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 參照文檔Add JS to your app集成

        

        • 在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命令要花費幾分鐘，默認安裝[email protected]，此處有個坑，需改成0.42.0 執行$ npm install --save [email protected]，或者上面第二條命令直接改成： $ npm install --save react [email protected] 安裝缺少的react $ npm install [email protected] 此警告可忽略 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文件，

        

        打開該文件，拷貝以下內容，測試“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);

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

        1 dependencies {
        2     ...
        3     compile "com.facebook.react:react-native:0.44.0" // 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

      內容如下：

      •  1 public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
         2     private ReactRootView mReactRootView;
         3     private ReactInstanceManager mReactInstanceManager;
         4 
         5     @Override
         6     protected void onCreate(Bundle savedInstanceState) {
         7         super.onCreate(savedInstanceState);
         8 
         9         mReactRootView = new ReactRootView(this);
        10         mReactInstanceManager = ReactInstanceManager.builder()
        11                 .setApplication(getApplication())
        12                 .setBundleAssetName("index.android.bundle")
        13                 .setJSMainModuleName("index.android")
        14                 .addPackage(new MainReactPackage())
        15                 .setUseDeveloperSupport(BuildConfig.DEBUG)//true
        16                 .setInitialLifecycleState(LifecycleState.RESUMED)
        17                 .build();
        18         mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        19 //"HelloWorld"需和index.android.js中方法 AppRegistry.registerComponent()第一個參數保持一致
        20         setContentView(mReactRootView);
        21     }
        22 
        23     @Override
        24     public void invokeDefaultOnBackPressed() {
        25         super.onBackPressed();
        26     }
        27 }

        布局文件主題設置：

      • 1 <activity
        2   android:name=".MyReactActivity"
        3   android:label="@string/app_name"
        4   android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        5 </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”頁面了。汗啊，費了好大勁···

附：查詢電腦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

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

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

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