Windows下配置React-native环境问题总结

  • Z时代
  • 2024-01-10
  • 分类：综合

react

从最近移动端市场的需求来看，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,等待项目编译运行

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

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
问题二:


以上是 Windows下配置React-native环境问题总结 的全部内容， 来源链接： utcz.com/z/383824.html

回到顶部