2018.4.16 根据官网http://facebook.github.io/react-native/docs/getting-started.html搭建。
系统基本信息:Windows 7 32位。
总共存在两种运行环境,第一种环境是纯JS写App。第二种环境是当纯JS提供的功能或者性能不能时,使用原生的Java或Object-C等来补充,混合代码来写App.
通过这篇文章,你可以配置好两种环境,并运行起一个简单示例程序。
下面详细介绍遇到的各种问题:
第一种环境:使用create-react-native-app配合Expo App
见http://facebook.github.io/react-native/docs/getting-started.html
依次安装,安装完成按照说明使用即可。中间可能遇到的问题:
1. Expo App下载不了。因为被和谐了,不能翻墙的可以去CSDN搜索Expo下载。但是也只有Android版本的Expo
2. Expo超时问题
解决问题
第一步:
一定要保证手机和电脑在同一个IP段内!
可以这样来检测:
手机连上WIFI后,查看WIFI详情,可以看到手机连上的路由器地址
电脑上命令行输入ipconfig,查看电脑的 IPv4地址.
需要保证这两个地址的前3位是相同的。
如果不同,你需要让你的手机Wifi与你的电脑的网络在同一个路由器下。
第二步:检测电脑端是否有类似于ViturlBox之类的虚拟设备。如果有,在命令行输入:
setREACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69//第一步的电脑端的ipv4地址
第三步:npm start之后,出现了二维码之后,会出现一个 exp://192.168.0.1:19000类似的地址(可能你的是exp://192.168.1.101:19000)。把exp:替换成http:,在手机端和电脑端分别访问 http://192.168.0.1:19000。
看是否会显示一些字符串。如果不是,则去检测电脑和手机是否对19000端口有限制。
百度搜索:电脑如何设置端口
如何运行第一种环境:官网上详细说明。
第二种环境:使用create-native-cli配合Android Studio
见http://facebook.github.io/react-native/docs/getting-started.html
切换到Building Projects with Native Code 选项卡,依照这里的提示依次进行。
可能遇到的问题:
1. Android Studio 的Setting-Appearance&Behavior-Appearance-System Settings 下没有Android SDK选项
解决:在Setting-Plugins下,勾选上AndroidSupport,并重启。如果这时提示有些什么依赖没有安装,先把这些依赖不勾选。
2. 提示没有SDK
360安全卫士搜索 Android SDK,下载第一个安装。在其安装目录下打开Sdk Manager.exe安装官网所要求的包。并将这个SDK目录添加进Android Studio和系统 Path下。
如果出现下载速度过慢,可以考虑切换代理:百度搜索:android studio 代理。
3. 打开Android Studio后,新建一个空的工程。如果你的系统是32位的。下面的控制台可能提示不兼容当前系统版本:
https://blog.csdn.net/wang_qian_kun/article/details/72526251
4. 打开Android Studio后,新建一个空的工程。可能还提示一些什么插件没有安装,没事,点击,缺啥安啥。可能还提示一些错误,没事,提示什么就去百度,都是小问题。
因为Android Studio自带的模拟器很渣,所以建议安装Genymotion来代替。自行搜索下载安装即可。
遇到的问题:
1. 安装Genymotion,其自动会安装 VirutalBox.安装之后,打开Genymotion,若提示VirutalBox 错误,获取VirutalBox对象失败:
https://www.cnblogs.com/imzhi/p/solution-to-the-failed-to-get-the-virtualbox-com-object.html
2. 需要注册一个谷歌账号,并且在这个genymotion登陆。视网络情况,可能需要翻墙
3. 打开Genymotion.提示Adb.exe已停止工作:
在Genymotion里选择Setting-ADB-Usecustom Android SDK tools选择本地Android Sdk目录(比如D:\ProgramFiles\Sdk).并重启电脑
或者也可以使用VisualStudio Emulator for Android来代替.(因为需要64位系统,所以我并未测试过,见https://reactnative.cn/docs/0.51/getting-started.html#visual-studio-emulator-for-android)
如何运行第二种环境:
如果一切准备就绪,打开Genymotion,点击Add,选择一种设备,此时会自动下载。下载速度其慢无比,建议翻墙。下载完成后,可以对这个设备进行一些配置,如果电脑比较差,需要把设备的内存调低一点。再启动这个设备。再在命令行里当前项目下运行react-native run-android
-ByPY