简介
React-native是Fackbook开源的一个技术,旨在用JS及react代码开发app,提倡组件化开发,给我们提供一个个封装好的组件供我们调用,强调learn once,write everywhere.
github地址:https://github.com/facebook/react-native
react-native中文网地址:http://reactnative.cn/docs/0.40/getting-started.html
安装步骤
这里只说基于Android 的在Windows上的环境搭建.
1.安装JDK
相信做android开发的电脑上本来就安装有Java开发环境,这里不多介绍
JDK下载官网http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
2.安装SDK
因为国内网的原因,建议使用镜像代理http://androiddevtools.cn/
3.安装C++环境
可以选择Windows SDK、cygwin或mingw,Microsoft Visual c++等其他C++环境。编译node.js的C++模块时需要用到。
4.安装Node.js与Git
node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统
Node.js下载地址:https://nodejs.org/en/download/
Git下载地址:https://git-for-windows.github.io/
建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
设置全局使用指定的镜像
打开git-cmd.exe,直接在命令行内输入:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
5.安装React Native命令行工具
已经在Github上下载react-native代码的情况
比如我的react-native代码在D://RN_software文件夹下,
进入到根目录
D:\RN_software>cd react-native-master
进入到react-native-cli文件夹
D:\RN_software\react-native-master>cd react-native-cli
执行安装操作
D:\RN_software\react-native-master>cd react-native-cli>npm install -g react-native-cli
6.创建项目
比如我在D:\RN_software\app_project创建文件夹用于放置工程项目
进入目录
D:\RN_software\app_project>react-native init FirstDemo
注意一定要驼峰式命名,首字母大写
7.运行packager 进入工程目录
react-native start
可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本
8.准备模拟器或真机 运行android
react-native run-android
9.修改后重新加载
修改代码之后不需要重新运行程序,可以Reload就行,以下两种方式开启
1.Android 5.0以上及更高版本,可以使用adb reverse命令
连接设备,usb在调试模式,执行
adb reverse tcp:8081 tcp:8081 这样就可以使用开发选项了
2.Android 5.0以下版本可以通过Wifi连接
- 手机和电脑连接并且两个设备在同一个Wifi网络环境下
- 采用react-native run-android运行应用
如果屏幕出现红色没有连接Server,则进行以下操作 - 摇晃设备或者命令行输入adb shell input keyevent 82,打开开发者菜单
- 点击Dev Settings进入,然后选择Debug server host & port for device
- 输入电脑的IP地址和端口号
- 回到开发者菜单,然后选择点击Reload JS
Android设备已经去除了Menu按键了,这时候我们可以通过摇晃设备来进行打开菜单,然后完成应用的重新加载,调试以及其他功能
正常情况下我们可以双击R键,就可以Reload重新加载,但是如果我们修改Android项目中的资源文件(例如res/drawable文件中图片)或者修改Android的源代码,那么就需要重新编译生成应用才可以生效。
可能遇到的问题
问题:找不到sdk 或者 无法正常化 sdk路径 解决办法:正确配置环境变量
问题:failed to find target with hash string 'android-23' in: F:\Android_SDK 解决版本:更新23版本的sdk
问题:build成功后是红色的:没有连接服务器js Server
解决方法:ip地址+8081端口 例子:192.168.1.104:8081