在windows下搭建React Native Android开发环境

1.登录 React Native 中文网
http://reactnative.cn/docs/0.45/getting-started.html

2.登录 Chocolatey 下载包管理工具
https://chocolatey.org/

3.打开 cmd 复制粘贴 Cmd.exe 中的命令代码
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

4.安装nodejs
choco install nodejs.install

5.安装python2
choco install python2

6.安装脚手架
npm install -g react-native-cli

7.创建项目
react-native init newPro

8.dirr 查看项目目录

9.安装jdk

10.安装android studio

11.启动模拟器

12.运行react native

第一步：react-native start

第二步：react-native run-android （重新开启一个终端）

13.手机或模拟器出现红底报错页面

14.摇一摇，出现操作列表

15.点击Dev Settings后，点击Debug server host & port for device,设置IP和端口

 

填入的的IP就是电脑的IP，不知道的话可以在命令行中输入ipconfig进行查询（但是不要在
上面的两个git bash里面查询），端口号固定8081。

16.再次摇一摇，选择Reload

17.找到项目文件下的 index.android.js 编写程序，摇一摇，选择Reload

 

常见问题：

1.项目创建过程中没有问题，但执行 $ react-native run-android 报错

$ react-native run-android
Scanning 554 folders for symlinks in C:\Users\Administrator\Desktop\react-
native\newPro\node_modules (73ms)
Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat
installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties
file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 2 mins 31.924 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

原因解析：

无法找到SDK路径

解决方案：

在android文件夹下，新建 local.properties，添加路径

例：sdk.dir = /Users/hema/Library/Android/sdk

sdk.dir = D:/adt/sdk

2.没有接受SDK组件的许可协议

Warning: License for package Android Support Repository not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> You have not accepted the license agreements of the following SDK components:
[Android Support Repository].
Before building your project, you need to accept the license agreements and
complete the installation of the missing components using the Android Studio SDK
Manager.
Alternatively, to learn how to transfer the license agreements from one
workstation to another, go to http://d.android.com/r/studio-ui/export-
licenses.html

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 1 mins 44.091 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

原因解析：

没有接受SDK组件的许可协议

解决方案：

打开 SDK Manager.exe,在Extras下面找到 Android Support Repository 并 install

 

3.设备没有连接上

:app:assembleDebug
:app:installDebug
10:35:45 E/adb: Unable to obtain result of 'adb version'
:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. ADB location: D:\adt\sdk\platform-tools\adb.exe

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 5 mins 57.339 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

原因解析：

设备没有连接上

解决方案：

（1） 执行 $ adb devices 发现 5037端口被占用

（2） 执行 $ netstat -aon|findstr "5037" 找到占用端口号的pid

（3） Ctrl + Shift + Esc 打开任务管理器 找到对应的PID,并结束该进程（我的是360手机助手，坑啊）

（4） 重新执行 react-native run-android

 

4.执行 react-native start 报错

Loading dependency graph, done.
ERROR EPERM: operation not permitted, lstat 'C:\Users\Administrator\Desktop\market\Market\android\app\build\intermediates\pre-dexed
\debug\debug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"C:\\Users\\Administrator\\Desktop\\market\\Market\\android\\app\\build\
\intermediates\\pre-dexed\\debug\\debug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar"}
Error: EPERM: operation not permitted, lstat 'C:\Users\Administrator\Desktop\market\Market\android\app\build\intermediates\pre-dexed\debug
\debug_516e8c627655282fe10905a9a9ff86082b8f73d7.jar'

问题解析：

不允许操作

解决方案：

保持 react-native run-android 的命令终端不动，重新执行 react-native start 即可。

 

5.Navigator 报错

Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react-native’.

原因解析：

根据信息，react-native这个包中的Navigator已经被移除，而需要导入react-native-deprecated-custom-components这个包来使用Navigator。

解决方案：

1. 通过npm安装相应的库
　　在项目根目录下输入npm install react-native-deprecated-custom-components --save 回车。

2. 在使用的JS文件中将Navigator引入进来，就是import
　　import {Navigator} from ‘react-native-deprecated-custom-components’;

然后就可以在项目中正确使用Navigator了。