ReactNative安装配置

Posted 2020-10-23 开始战斗

1.安装jdk1.8,配置好path，

1 javac，java -version

2.安装设置android sdk

 1     a.
 2         解压：D:\www\sdk\adt-bundle-windows-x86_64-20140702
 3     b.环境变量：
 4         ANDROID_HOME: D:\www\sdk\adt-bundle-windows-x86_64-20140702\sdk
 5     c.PATH:
 6         %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
 7     d.设置SDK,进入AndroidSDK目录
 8         双击SDK Manager.exe。
 9         配置：
10             点开SDK Manager后，点Tools->Options...，进入Android SDK Manager - Settings窗口
11             HTTP Proxy Server:mirrors.neusoft.edu.cn  //上面代理地址之一
12             HTTP Proxy Port：80
13             勾选：Force https://... sources to be fetched using http://...
14             点：close->回到原界面
15             继续点：Packages->Reload
16         选中以下项目：见文件夹下两张图 
17             Android SDK Build-tools version 23.0.1 
18             Android 6.0 (API 23) 
19             Android Support Repository    //必须装
20             Local Maven repository for Support Libraries 
21         //勾上右下角Show Pacage Details->在列表中勾选
22     Android 6.0 (Marshmallow)下
23         Google APIs
24         Intel x86 Atom System Image、Intel x86 Atom_64
25         System Image
26         Google APIs Intel x86 Atom_64 System Image
27     点SDK Tools窗口：
28         勾上右下角Show Pacage Details->在列表中勾选
29         Android SDK Build Tools下：
30             Android SDK Build-Tools 23.0.1。（必须是这个版本）
31         Apply->安装->OK

4.安装node(暂不能装7.1版本)
卸载7.1，安装6.1

5.配置npm 从镜像走
先保存npm config：

1 1.输入:npm config edit
2 2.将弹出的文件另存到:e:/reactNative
3 3.npm config --global edit //显示原始config文件
4 npm config set registry https://registry.npm.taobao.org --global
5 npm config set disturl https://npm.taobao.org/dist --global
6 临时使用：
7 npm --registry https://registry.npm.taobao.org install express //安装Express

6.安装git客户端

7.安装react-native命令行工具react-native-cli

npm install -g react-native-cli

8.创建项目
进入你的工作目录，运行

react-native init hello

9.启动

react-native start

10.浏览器访问

http://localhost:8081/index.android.bundle?platform=android

11.运行模拟器
安装bluestacks，并运行

cmd中运行adb devices //看是否能看到设备

12.连接真机，关闭原先react-native start窗口，另开一dos窗口，执行

react-native run-android

模拟器上不显示文字
真机上正常

谷歌浏览器中查看：

http://localhost:8081/debugger-ui

使用你喜欢的编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改！

使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是?+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志

但通常一般第一次手机会报错
摇一摇手机，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口
"摇一摇"这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单
设置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！

//---------------模拟器红屏解决(没解决)----------------------------
点模拟器右下角摇一摇
点击Dev Settings后，点击Debug server host & port for device,设置IP和端口
192.168.0.104:8081
回到空白页面，再次摇一摇手机，选择Reload

参考文献：http://reactnative.cn/docs/0.40/getting-started.html