React Native学习之路(1)-起飞hello worl
2017-07-04 本文已影响76人
woow_wu7
(1)windows10平台上搭建React Native开发环境
-
安装Python
地址：https://www.python.org/ -
安装Node.js：
地址：https://nodejs.org/en/ （ node -v 查看node版本 ）
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
用命令行工具输入以下内容：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 安装react-native命令行工具：
cnpm install -g react-native-cli
--
( react-native -h：查看react-native支持的所有命令)
( react-native -v：查看react-native版本)
-
安装android开发工具 AndroidStudio
地址：https://developer.android.google.cn/index.html
(React Native目前需要Android Studio2.0或更高版本。)
(Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。) -
安装SDK(在AndroidStudio中安装sdk)
(1) Android SDK - SDK PlatForms - android6.0：
1.Google APIs、
2.Android SDK Platform 23、
3.Intel x86 Atom System Image、
4.Intel x86 Atom_64 System Image以及
5.Google APIs Intel x86 Atom_64 System Image。
(2)
1.Android SDK - SDK Tools - Android SDK Build Tools26 - 23.0.1
2.然后还要勾选最底部的Android Support Repository
-
安装JDK( Java SE Development Kit )
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html -
配置 ANDROID_HOME 环境变量
(1)我的电脑-属性-高级系统设置-环境变量-新建：
变量名：ANDORID_HONE
变量值：F:\Android\sdk\tools（安装androidStudio时选择的sdk目录）
(2)我的电脑-属性-高级系统设置-环境变量-path-新建：
F:\Android\sdk\tools
F:\Android\sdk\platform-tools
```
- 安装git
地址：https://git-for-windows.github.io/···
下载Git，记得把git.exe的路径写入系统环境变量，因为在执行react-native init命名时会调用git去下载react-native的源码。 在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中。
#####(2)创建react-native应用
- 初始化一个react-native应用：
```
(1)react-native init <项目名字>
(2)cd <项目名字>
(3)react-native run-android （或者react-native run-ios）
```
-
#####(3)逍遥模拟器（踩坑1）
(1)用adb连接 安卓模拟器 :
```
逍遥模拟器 adb connect 127.0.0.1:21503
夜神模拟器 adb connect 127.0.0.1:62001
```
(2)逍遥模拟器出现报错:
unable to load script from assets index.android.bundle on windows
```
解决方法：
(1)在项目中找到android\app\src\main文件夹中手动添加 assets 文件夹
(2)在cmd的项目根目录中执行以下代码：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
(3)在重新执行：react-native run-android
```
总结：
这个index.android.bundle毫无疑问就是用来调用原生控件的js脚本，每次当你改变了 index.android.js，你都需要使用上面的代码片段，来及时的更新index.android.bundle，然后打包才可以把新的index.android.js应用上，所以当没有index.android.bundle文件时，RN是无法运行的.
(3)如何调出逍遥模拟器的 开发者模式
```
.
设置-关于平板电脑-版本号(连续点击7次)
.
```
#####(4) 用react-natie 起飞国际惯例 Hello World
```
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
```
用上面的代码覆盖你的index.ios.js或是index.android.js 文件，然后运行看看。
- 踩坑
（报错：could not connect to develpment server ）
1、首先检查包服务器是否运行正常。
(1)在项目文件夹下输入react-native start或者npm start均可开启服务器，
```其实react-native run-android会自动开启服务器，但是为了保险起见用react-native start或者npm start
```
(2)是我们需要在PC端确认包服务器是否运行正常。
检查网址为：http://localhost:8081/index.Android.bundle?platform=android
2.再次执行 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3.再次执行react-native run-android将会看到更新
> 解决办法（2017-7-5更新，上面的方法每次都要修改asset内的index.androdi.bundle文件，相当麻烦）
>错误信息还是比较明确的，只要挨着检查issue，就可以排查出问题所在。
排查后发现，ip地址不对，目前还是localhost，而不是充当服务器的PC，所以要设置争取的ip地址。
（1）唤起设置属性窗口，点击“Dev settings”:
（2）点击Debuug server host 出现设置ip地址窗口
（3）填写你自己的ip地址，填写ip地址时不要忘记了端口号8081：
（例：192.168.1.102：8081）
以后的任何修改都会自动更新了~。~
