react-native(一)环境配置到页面实时更新

RN的包 基本都是国外的，建议用下面这个淘宝镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

普通安装请看 这篇文章
Android SDK下载---选择SDK、Build-Tools、SDK Platform-Tools

建议前期所有安装包不要修改默认安装位置
特别是AndroidStudio很可能出问题~！！！
测试时最好准备一部手机直连，会少很多麻烦！！！

注意这个命令 react-native init 项目名

这个项目名请用小写，中间别用字母以外的符号[但是文字中间可以下划线]
而且尽量超过15位字母不然以后很多坑！！！！

No.1

react-native run-android 之后
gradle-2.14.1-all.zip 文件下载不成功

解决方法

那么我们现在自己手动去下载这个 静态包
然后把下载好的压缩包 gradle-2.14.1-all.zip 直接放在

项目根目录下 android\gradle\wrapper\ 这个目录

修改项目根目录下 android\gradle\wrapper\gradle-wrapper.properties 这个配置文件

其中的

distributionUrl=https://services.gradle.org/distributions/gradle-2.14.1-all.zip

修改为

distributionUrl=gradle-2.14.1-all.zip

No.2

C:\Users\Administrator\AppData\Local\Android\sdk 缺少licenses目录  
创建 C:\Users\Administrator\AppData\Local\Android\sdk\android-sdk-license

解决方法

文件如下，【注意，第一行是空，换行即可】

# 这行是空行，不写东西，第二行是下面这串字符串
8933bad161af4178b1185d1a37fbf41ea5269c55

No.3

真机运行时，报错

unable to load script from assets 'index.android.bundle'

解决方法

1.在 android/app/src/main 目录下创建一个 assets 空文件夹

2.执行下面命令 [会发现 assets文件夹下多出两个文件]

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.重新run程序，即可

注：这个index.android.bundle毫无疑问就是用来调用原生控件的js脚本，每次当你改变了 index.android.js，你都需要使用上面的代码片段，来及时的更新index.android.bundle，然后打包才可以把新的index.android.js应用上，所以当没有index.android.bundle文件时，RN是无法运行的

No.4

初次编译时，没有签名 点此查看

当你看到下面这图，说明你环境安装成功了

第一次编译程序之后

如果编译过一次后

npm start 

就可以直接开了
npm install 是自动下载package 里有而module 里没有的组件

常见错误

Could not connect to development server

a.首先检查包服务器是否运行正常

在项目文件夹下输入 react-native start 或者 npm start 均可开启服务器
但是我们需要在PC端确认包服务器是否运行正常
检查网址为 http://localhost:8081/index.Android.bundle?platform=android

b.检查硬件连接，查看是否连接成功

adb devices

如果有真机在测试，那么结果大致是如下图

c.飞行模式要关闭

d.检查设备

adb reverse tcp:8081 tcp:8081  

若结果如下

则其解决方案
a.手机-设置-应用程序-开发-usb调试打开再关闭一次
b.重启手机，usb调试打开再关闭一次
c.执行指令

adb kill-server
adb start-server

e.保证电脑和手机在同一网络下

如果是通过路由器访问的那种，手机、电脑都得用同WIFI下，内网连接
如果是模拟器，则可以通过当前电脑上的虚拟网卡的ip与node服务器相连

设置编译环境PC的IP地址，查看你电脑上实际的ip

ipconfig

菜单键 -> 选择 Dev Settings

选择 Debug server host & port for device

菜单键 -> 选择 Reload ，将显示你最新的页面

为了以后调试也方便 Dev Settings 界面的以下三个选项都需要开启

Debug js remotely
Enable Live Reload  
Enable Hot Reloading   

很重要！！！对了，npm有时候运行时，会假死，你可以在对应命令行上界面按记下不太重要的键盘按键，如，F3键，即可唤醒npm继续往下运行