React Native For Android Windows下环境搭建

准备工作

JDK
Android SDK
C++环境
node.js
react-native命令行工具

安装JDK

从Java官网下载JDK并安装。请注意选择x86还是x64版本。

推荐将JDK的bin目录加入系统PATH环境变量。

安装Android SDK

可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

为了加速下载,推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

Tools/Android SDK Tools (24.3.3)

Tools/Android SDK Platform-tools (22)

Tools/Android SDK Build-tools (23.0.1)

Android 6.0 (API 23)/SDK Platform (1)

Extras/Android Support Library(23.0.1)

设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:\Program Files\Android SDK Tools)设置环境变量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

安装C++环境

推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

安装node.js服务器端
到node.js的网站上下载node.js然后安装上就可以了。
https://nodejs.org/en/

安装React-native-cli

npm install -g react-native-cli

初始化项目

react-native init reactNative

如果报错了(新版本node的不会报错)

This will walk you through creating a new React Native project in d:\www\project
\reactNative
events.js:85
    throw er; // Unhandled 'error' event
      ^
Error: spawn npm ENOENT
  at exports._errnoException (util.js:746:11)
  at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
  at child_process.js:1144:20
  at process._tickCallback (node.js:355:11)
  at Function.Module.runMain (module.js:503:11)
  at startup (node.js:129:16)
  at node.js:814:3

windows下执行到这里就会报错,原因是npm在windows下的bug(来源于参考资料)。解决办法,直接clone项目主分支master。

git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g

接下来就可以初始化项目了

react-native init reactNative

启动服务端代理

react-native start

这条命令会看见程序开启了8081端口, 可以看见项目代码输出。

Run android app

cd reactNative //进入项目目录
react-native run-android

如果没有安装安卓模拟器,这里可以直接使用真机安装测试。这个过程很漫长,等等等……

如果顺利到这里已经完全可以跑起来项目了。
运行结果如下图:
这里写图片描述
安卓调试

目前Windows下无法自动打开chrome进行调试,所以手动打开chrome,访问如下地址: http://localhost:8081/debugger-ui 即可。

ps:你可能会遇到

报错了(1)

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: D:\Program Files\Andro
id SDK Tools

* 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: 10 mins 42.463 secs
Could not install the app on the device, see the error above.

解决办法就是安装Android-23。

报错了(2):

Could not find com.android.support:appcompat-v7:版本号.

安装 Android Support Libraries 和 Android Support Repository

(3):build成功,安装上apk后界面红了

这里写图片描述

解决办法
首先看看你的服务有没有启动成功,就是上面提到的启动服务端代理
如果服务器启动成功则:
选择菜单(摇晃手机或者按菜单键):Dev settings
这里写图片描述

选择项:Debug server host for device
这里写图片描述

设置编译环境PC的IP地址,例如:192.168.1.5
这里写图片描述
确保手机与编译环境在同一WIFI环境下(IP段相同),server在运行状态下,重启APP.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值