React-native 环境配置过程与搭建项目问题汇总

Posted treekang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-native 环境配置过程与搭建项目问题汇总相关的知识,希望对你有一定的参考价值。

 首先,最好参照来源当然是来自于开源代码本身的文档:

https://reactnative.cn/docs/getting-started/

 

 

一、初始环境搭建

1.环境组件

由于从网上查找React-native的搭建版本是0.48,我就还通过win10的powerShell安装了  -Chocolatey

Chocolatey是一个 Windows 上的包管理器,类似于 linux 上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin

就是直接上述这串文本复制到powerShell中运行即可。

这个工具可以帮助我们去下载React-native 环境配置的一些必要的组件

Python 2 (必要组件1)

打开命令提示符窗口,使用 Chocolatey 来安装 Python 2.

注意目前不支持 Python 3 版本。

choco install python2

Node(必要组件2)

打开命令提示符窗口,使用 Chocolatey 来安装 NodeJS。

choco install nodejs.install

  

但是0.56的版本文档中。这个chocolatey已经不是一定要使用的了。只需要个人自行去下载指定版本以上的组件即可

我们建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(不支持 1.9)。

 

2.接着就是React-native的主要命令行工具

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

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

 

3.最后当然android必不可少的编译环境Android studio

这边需要android studio2.0以上。。至于怎么安装就不在这里赘述了。

 

 

二、创建初始项目

react-native init AwesomeProject

以上就创建项目名为AwesomeProject的操作,同样是在powerShell中执行。

一大串的执行命令之后,就会在执行的目录下创建了AwesomeProject文件夹:如下

技术分享图片

这样已经生成了一个最简单的RN项目,其中android文件下的,就和android studio创建的项目是一致的

cd AwesomeProject
react-native run-android

然后可以通过USB连接好手机,将项目跑起来。

 

 

三、项目运行问题(踩坑与填坑)

  • SDK location not found问题。 android项目指定的SDK路径没找到

    技术分享图片

   

解决办法: 

此时说明我们android项目没有找到指定SDK的配置,所以我们可以从原有的android studio项目中,找到【local.properties】复制到RN项目android的根目录下,

主要就是local.properties中配置了有SDK的路径

sdk.dir=E:\\XXX\\xxx\\sdk 

 这时候重新用react-native run-android 运行项目即可.

 

 


 

  • 红色界面-Unable to load script from assets 

技术分享图片

原因:因为 android/app/src/main 文件目录中缺少 assets.

解决办法:

1,在 android/app/src/main 目录下创建一个 assets空文件夹

mkdir 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/

实际上操作就是处理根目录的index.js,最后在assets目录中生成两个文件

index.android.bundle

index.android.bundle.meta

 

就我理解,应该实现android设备与PC的js server进行沟通中介。以后有空再详细看看。

 

 


 

 

  • powerShell执行react-native bundle(上一条问题的命令)时,出现Unable to resolve module `AccessibilityInfo`

技术分享图片

 

---解决办法:

具体原因可能是 react-native: 0.56.0有漏洞导致的。

所以我们需要安装一个稳定版本

 

react-native应该是0.55.4 比较稳定,react-native-cli 听一群里的大神说使用1.2.0更稳定,所以我把这旧版的都先uninstall了。

那就干吧,分别执行以下命令(注意噢,这样全局执行): 

npm uninstall -g react-native-cli
npm install [email protected]
npm install -g [email protected]
react-native init --version="0.55.4" KAwesomeProject

就是利用0.55.4版本重新创建一个项目。

 

参照https://blog.csdn.net/aceaddi/article/details/81148585

 

 


 

 

  • 红色界面-could not connect to devolopment server - e.g. 10.0.1.1:8081

技术分享图片

此时是有由于调试手机没有和本地开发服务器连接在一起。从官网的文档可知

(Android 5.0及以上)使用adb reverse命令

注意,这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。

首先把你的设备通过USB数据线连接到电脑上,并开启USB调试(关于如何开启USB调试,参见上面的章节)。

  1. 运行adb reverse tcp:8081 tcp:8081
  2. 不需要更多配置,你就可以使用Reload JS和其它的开发选项了。

(Android 5.0以下)通过Wi-Fi连接你的本地开发服务器

  1. 首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
  2. 在设备上运行你的React Native应用。和打开其它App一样操作。
  3. 你应该会看到一个“红屏”错误提示。这是正常的,下面的步骤会解决这个报错。
  4. 摇晃设备,或者运行adb shell input keyevent 82,可以打开开发者菜单。
  5. 点击进入Dev Settings
  6. 点击Debug server host for device
  7. 输入你电脑的IP地址和端口号(譬如10.0.1.1:8081)。在Mac上,你可以在系统设置/网络里找查询你的IP地址。在Windows上,打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
  8. 回到开发者菜单然后选择Reload JS

技术分享图片

 

  • 红色界面-response error code 500

技术分享图片

 

 四、项目成功运行。

 

 技术分享图片

 

以上是关于React-native 环境配置过程与搭建项目问题汇总的主要内容,如果未能解决你的问题,请参考以下文章

react-native 环境搭建-windows

react-native 开发环境搭建

React-Native 仿喜马拉雅APP项目笔记(多环境配置 项目配置路径 堆栈式导航)

windows搭建安装react-native环境

React-Native windows环境搭建记录

BaseCms系列文章:项目介绍与环境配置