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

2017-08-18 16:17:51 react-native 1513 0

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

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

普通安装请看 这篇文章

建议前期所有安装包不要修改默认安装位置
特别是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是无法运行的

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

第一次编译程序之后

如果编译过一次后

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继续往下运行

注:若无特殊说明,文章均为云天河原创,请尊重作者劳动成果,转载前请一定要注明出处