ReactNative环境部署

Guan
1,073 阅读6分钟

ReactNative解决方案

ReactNative是一款制作手机端APP的框架。使用React的语法(JS，JSX)等，开发原生APP应用。

APP制作方式：开发方式 制作流派

  • WebAPP H5网页制作的手机端页面，运行在手机端浏览器的。可以通过H5的一些API调用手机部分功能。

    • 优点：成本低
    • 不足：体验感差，网页痕迹重，性能较低。无法调用一些手机的高级功能。

  • 原生开发：IOS(Object-C、Swift) Android(Java、Kotlin) 使用对应的开发语言开发。

    • 优点：性能好，能够实现各种自定义效果，动画流畅...
    • 缺点：成本高(人员成本+时间成本)

  • Hybird APP：混合开发 混编

    • 利用JS调用原生的API
    • 优点：用H5制作页面，底层通过JS调用原生API，性能可以得到优化。可以实现大部分手机端功能。开发成本低，体验较好
    • 国内一些具体解决方案：uni-app[DCloud]、APICloud、微信小程序、Taro(京东)

  • ReactNative

    • 目标：开发成本低并且性能向原生开发模式靠拢

    • 使用JS代码(对于web开发人员成本低)，通过一个特殊的编译环境把代码编译转化成原生代码。这样降低了开发成本和时间成本(一套代码)，生成的是原生代码。使用体验和工程质量有保障。

      它开发的APP只能运行在模拟器(开发过程中)或者真机中(打包后)

ReactNative环境部署

RN是移动APP的一个解决方案。原生App开发。

官方文档:www.react-native.cn

IOS[需要mac电脑]和Android

如果是使用MAC的同学，需要查看官网搭建环境:

www.react-native.cn/docs/enviro…

需要环境：

JAVA环境 JDK环境

Android SDK 安卓开发环境

node环境及其NPM包管理工具 √

安卓模拟器(夜神模拟器) 注意使用最新版7版本

下载百度网盘共享的资源 链接：pan.baidu.com/s/1pLeRY_Ab… 提取码：exfj 复制这段内容后打开百度网盘手机 App，操作更方便哦

7f7118591799efe9e215240c38ad4e4.png

Node环境

要求版本大于等于12.

# 在cmd下查看版本
node -v

# npm 包管理工具是否使用正常
npm -v 

# 查看当前包镜像源  如果是国内taobao源就不用修改
npm config get registry

# 如果不是国内源 建议修改到国内源
npm config set registry https://registry.npm.taobao.org/

Java环境

Java环境也称为JDK

RN环境中，要求Java环境8版本(1.8)以上。其它版本没有测试过。安装的时候，建议使用百度网盘里共享的版本即可。

b5d65b87a4b389519de5d0808d4ecd3.png

前置环境清理：

每个人的电脑环境不同，可能之前安装过低版本的JAVA环境。RN要求Java8以上版本，需要卸载旧版本的Java环境和环境变量。

①卸载低版本的Java环境 1642084054(1).jpg 两个都要卸载鼠标右键卸载，根据后续提示卸载即可

②检查相关Java环境变量并删除

通过操作系统的搜索功能，查找环境变量并打开 在用户变量和系统变量中查找是否有JAVA_HOME环境变量，选中并删除，记得点确定保存。

image.png

①点击安装JDK15

没有什么特殊需要选择的，使用百度网盘提供的安装包，安装即可。

②在cmd中查看java命令及其版本

image.png

Android_SDK环境

RN官网上需要先安装Android Studio软件才可以下载SDK。比较繁琐过程比较慢。对于网络要求较高。使用百度网盘中提供即可。

image.png ①解压并放到目录中

路径要求不要有中文，不要有空格。

image.png ②配置环境变量

环境变量，在cmd命令行下，可以直接调用某些命令。

image.png

变量名: ANDROID_HOME
# 变量值  ANDROID_SDK具体存放路径，要根据实际情况填写。放在哪儿填写哪儿
变量值: D:\RNENV\ANDROID_SDK

image.png 配置PATH变量

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

image.png

win7的系统或者打开Path环境变量是如下样式：

需要把变量值，赋值出来到文本编辑，不要手动回车折行。

把需要配置的变量一个一个通过;分隔拼接起来。拼接好后，再给复制回去。

image.png

③配置好以上环境变量，重启cmd，查看

配置好以上ANDROID_SDK环境之后，就可以看到以下的调用了。

image.png

模拟器安装

夜神模拟器，可以使用百度网盘里提供的安装包。

夜神模拟器版本要求安装7版本，之前安装的是旧版本5，就卸载重装7版本的。

模拟器安装不上去的，根据实际错误，搜索解决。

  • 显卡驱动版本过低，自行升级驱动
  • 或者怎么装都装不上去，重装操作系统。再重新安装模拟器，部署环境

image.png ①夜神模拟器安装好后，启动

②在cmd命令行，检测adb关联模拟器

adb版本不一致，需要同步adb软件的版本

image.png 把ANDROID_SDK/platform-tools下nox_adb.exe文件复制到夜神模拟器的目录下Nox/bin

image.png

image.png 替换同步adb软件版本之后，再次通过cmd命令行。检测

image.png 以上一定要在夜神模拟器开启状态下进行测试查看

image.png

如果命令行使用adb version时，提示faild to create 启动软件时创建依赖的文件失败了。猜测可能把ANDROID_SDK，安装到了C盘。C盘系统没有写入权限。报错无法运行，直到软件奔溃提示退出。

解决：放置到非C盘系统盘的其它盘符目录，同时修改环境变量到新的目录。

启动项目包

生成下载项目包(这里暂时不使用)

# 默认下载生成项目包  
npx react-native init rnApp

因为下载时间较长及其版本的问题，我们使用百度网盘中提供生成好的项目包进行使用。

①从百度网盘获取到项目包

image.png

②把它解压并防止到代码目录

路径非系统盘(非C盘)，不要有中文、不要有空格

②把百度网盘中的app-debug.apk文件拖拽安装到夜神模拟器中

image.png image.png

③在cmd中进入rnApp项目包目录，执行启动服务命令

npm start

image.png 默认启动服务监听的端口为8081

image.png 在模拟器中通过127.0.0.1访问不到，需要使用到对外访问IP才可以访问到。

image.png

通过cmd命令查看本地的对外IP地址，并使用浏览器访问测试

image.png

④在模拟器中点击启动刚才的rnApp

image.png

image.png

⑤配置APP的调试地址到启动开发服务器地址

image.png

通过cmd命令查看本地的对外IP地址，并使用浏览器访问测试

image.png

image.png

配置完成之后，稍微等待，就可以看到如下界面。如果不出现，在项目包启动的cmd命令里，敲r，重新加载。

image.png

敲r没用，提示 No apps connected.，模拟器卡了，把rnApp软件从模拟器里关闭，并重启即可。

image.png

如果遇到这个问题。说明IP地址不对，或者项目包的开发者服务器没有启动。

image.png

RN环境的部署到这里就完成啦，有问题的童鞋可以在下方留言哦~

avatar
文章
阅读
粉丝