React-Native两种环境的搭建

    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

猜你喜欢

转载自blog.csdn.net/cvchihzhza/article/details/79960941