Windows下配置React-native环境问题总结
从最近移动端市场的需求来看,Android原生开发已经危机重重,混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰,因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇,后面会有系列文章记录学习Reactive Native的成长,希望能帮助到后来的人,尤其是Android原生开发转混合开发的人。
使用的电脑操作系统不同,环境配置具体步骤有所不同,此篇文章是针对Windows下使用Android Studio开发RN环境的搭建。
一: 环境搭建
1.安装Chocolatey
Chocolatey是一个Windows上的包管理器,安装Chocolatey是为了方便接下来安装Python和Node.js。当然也可以跳过这步直接去官网下载Python和Node.js。
以管理员的身份来运行命令提示符窗口运行(打开*软件执行这个命令要快些)。
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
下载安装完成后,就可以使用命令安装工具了。
2.安装Python
使用Chocolatey来安装Python 2,打开命令提示符窗口cd到你要安装的盘运行
choco install python2
(tips:目前版本不支持Python3)
3.安装Node.js
choco install nodejs.install
设置npm镜像加速后面的过程(*)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.安装Yarn和React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
设置yarn镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
5.测试安装
以上步骤就完成了RN的环境配置,初始化一个项目来测试安装是否完成,在命令提示符窗口cd到项目要创建到的目录。
react-native init ReactNativeDemo ---初始化项目
cd ReactNativeDemo ---切换到项目根目录
react-native run-android ---运行项目
如果你已经成功运行了项目,说明安装成功。二 前边初始化了一个Rn项目,然后就可以在手机上边运行了,运行的步骤:
1.进入项目的根目录,右击打开命令行,输入react-native run-android,等待项目编译运行
等待片刻,项目如果运行成功会出现如下界面
2.1 此时RN的APP已经安装完毕,但有以下需要注意:
2.1.1 此时app和node.js服务端的交互是通过数据线传递的数据,如果拔掉数据线,摇晃手机打开RN开发者菜单,点击reload,可能会出现红屏,提示:could not connect to development server.
2.1.2 解决方法为:首先保证手机和电脑处于同一wifi下,然后摇出RN开发者工具菜单依次打开Dev Setting–>Debugging–>然后输入电脑在该网段分配的IP地址,并设置端口号为8081(node.js服务的默认端口号)格式如下:192.168.3.3:8081,然后重新reload此时即可重新请求到数据
上边步骤操作完成,就可以在app.js(这里需要注意在0.49版本之前app.js是拆分为index.android.js和index.ios.js的,android和ios开发可以分别在对应的文件里边写代码)里边写Rn代码了
运行项目中可能遇到的问题:
问题二: