react native新建项目运行在安卓设备上

一、

根据http://facebook.github.io/react-native/docs/getting-started.html或者https://reactnative.cn/docs/0.51/getting-started.html先安装好对应软件以及配置好相应环境。

二、

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。

7、参考https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content
http://blog.csdn.net/panhongzhi02/article/details/54910894
https://www.jianshu.com/p/fd4558f1a928
五、常见问题

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和其它的开发选项了。

参考https://reactnative.cn/docs/0.47/running-on-device-android.html#content

3、摇晃手机，或者运行adb shell input keyevent 82，可以调出开发者菜单。

react native新建项目运行在安卓设备上

猜你喜欢