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

下载安装完成后,使用chocolatey命令查看是否安装成功,出现版本号证明安装成功,r就可以使用命令安装工具了。

2.安装Python

使用Chocolatey来安装Python 2,打开命令提示符窗口cd到你要安装的盘运行

choco install python2

(tips:目前版本不支持Python3)

使用python命令查看是否安装成功

3.安装Node.js

choco install nodejs.install

使用node -v命令查看是否安装成功

设置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镜像源:

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,等待项目编译运行

等待片刻,项目如果运行成功会出现如下界面

Windows下配置React-native环境问题总结_第1张图片

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代码了

运行项目中可能遇到的问题:

问题一: reactnative(0.49以上版本) unable to load script from asset/index.android.bundle问题解决
  总结:初始化运行红屏错误 unable to load script from asset/index.android.bundle
  原因:assets中没有成功打包出index.android.bundle文件
解决:1.去(你的项目文件夹)\android\app\src\main目录下新建assets文件夹
     2.终端下运行
     react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3.再次执行 react-native run-android(运行之前一定要去刚刚新建的assets文件夹下查看生成了index.android.bundle文件)
  注:由于0.49版本以后的react-native没有index.android.js和index.ios.js文件,而统一合并成了index.js,所以 使用0.49及以后版本的开发者请将第2步中的入口文件改为index.js
问题二:

你可能感兴趣的:(React,Native,Windows)