react native新建项目运行在安卓设备上
2018-01-09 17:34
441 查看
一、
根据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依赖
d、在 app 目录里添加需要的权限
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 babel-preset-react-native@2.1.0
2、
参考https://reactnative.cn/docs/0.47/running-on-device-android.html#content
3、摇晃手机,或者运行adb shell input keyevent 82,可以调出开发者菜单。
根据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 babel-preset-react-native@2.1.0
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(二)之新建项目、运行packager、把程序跑起来
- React Native 环境搭建, 新建项目, 运行和调试
- 新建react-native项目并在genymotion模拟器上运行
- 使用WebStorm创建/运行/调试React Native项目
- React-Native 学习之--问题处理 一. github上下载的项目不能运行?
- React-Native(二)引入项目,在windows上运行已有的Demo for Android
- React Native商城项目实战06 - 设置安卓中的启动页
- 新建安卓项目运行出现AndroidMainFest.xml file missing!
- 运行React-Native项目
- 使用react-native做一个简单的应用-02项目搭建与运行
- React Native商城项目实战06 - 设置安卓中的启动页
- 运行react-native中的android项目及问题解决
- 运行React-Native项目
- React-Native开发之运行你的第一个项目
- React Native-创建项目和运行项目
- 使用react-native启动安卓项目时JS SERVER 未启动报错(Starting JS server...)
- 如何运行github上的React Native项目