1. 程式人生 > >react native新建專案執行在安卓裝置上

react native新建專案執行在安卓裝置上

一、

二、

1、新建(不含android和ios包的)專案:在終端輸入 npm install -g create-react-native-app和create-react-native-app AwesomeProject即可新建一個名為AwesomeProject的專案。

2、在終端切換到專案根目錄下(如cd AwesomeProject),開啟服務npm start,根據提示選擇執行到android手機上。

3、此時手機上會安裝上一個名為Expo的app,終端上會顯示一個二維碼,使用Expo掃描二維碼即可進行除錯。

三、

1、新建(含android和ios包的)專案:在終端輸入react-native init AwesomeProject即可新建一個名為AwesomeProject的專案。

2、從你電腦上的其他安卓專案中複製local.properties檔案到專案對應的android包下。

3、在終端切換到專案根目錄(如cd AwesomeProject),開啟服務同時react-native run-android執行專案到android手機上(windows下需要先開啟服務npm start)。

四、

1、通過Android Studio新建Android專案。

2、a、在原生 Android 專案的在app/build.gradle檔案中,新增React Native依賴:compile"com.facebook.react:react-native:+
     b、加入.so 庫ndk {
                               abiFilters "armeabi-v7a", "x86"
                              }   
     c、在工程目錄下找到工程的 build.gradle檔案中,新增 maven依賴

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}
    d、在 app 目錄裡新增需要的許可權
 <uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    e、新增 FaceBook 的 ReactNative 除錯的 activity
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

3、在專案根目錄使用npm init命令建立package.json,同時在生成的package.json檔案的scripts中新增
"start": "node node_modules/react-native/local-cli/cli.js start"

4、使用npm install -save react,npm install -save react-native下載原始檔

5、你也可以使用curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 
在android根目錄下生成.flowconfig檔案作用於flow主要用來做靜態程式碼檢查。

6、參照上面兩種方式生成的專案來填寫你的AndroidManifest.xml、你的react-native入口activity、你的application還有index.android.js。

1、The development server returned response error code: 500
這個錯誤可能是 babel-preset-react-native庫版本不對應,需要在終端輸入npm uninstall babel-preset-react-native  
npm install [email protected]

2、

(Android 5.0及以上)使用adb reverse命令
注意,這個選項只能在5.0以上版本(API 21+)的安卓裝置上使用。

首先把你的裝置通過USB資料線連線到電腦上,並開啟USB除錯(關於如何開啟USB除錯,參見上面的章節)。

執行adb reverse tcp:8081 tcp:8081
不需要更多配置,你就可以使用Reload JS和其它的開發選項了。

3、搖晃手機,或者執行adb shell input keyevent 82,可以調出開發者選單。