React-Native集成到已有項目中的總結
阿新 • • 發佈:2017-05-17
could not rom 浮窗 js文件 命令行 led align nba handle
-
安裝Python
- 從官網下載並安裝python 2.7.x(3.x版本不行)
-
安裝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
- 從官網下載node.js的官方V6.X.X版本或更高版本。安裝完成後檢測是否安裝成功:node -v
安裝完node後建議設置npm鏡像以加速後面的過程(或使用科學上網工具)。
npm config set registry https://registry.npm.taobao.org --global
-
安裝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
- npm install -g react-native-cli
安裝完yarn後同理也要設置鏡像源:
yarn config set registry https://registry.npm.taobao.org --global
-
在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.
- 以下為必選
-
配置ANDROID_HOME環境變量
- 確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。
打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建
- PATH設置 把Android SDK的tools和platform-tools目錄添加到PATH變量中: PATH -> 雙擊進行編輯
- 確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。
打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建
-
集成到已有的APP中
-
安裝組件
- 進入https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
參照文檔Add JS to your app集成
- 在Terminal中的app根目錄
$ 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”
- 進入https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
參照文檔Add JS to your app集成
-
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和訪問網絡權限:
- 打開package.json 文件在 scripts中添加:
"start": "node node_modules/react-native/local-cli/cli.js start"
-
添加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>
-
-
啟動js服務器
$ npm start
-
出現下面提示後 終於可以運行了···結果屏幕紅了, 報錯行: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
-
- 原因:沒有找到執行的bundle文件。 兩種解決方式:
-
修改項目中的package.json文件
-
-
在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,“--”為兩個“-”
-
-
- 使用命令行直接生成
不用修改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集成到已有項目中的總結