react-native基础环境搭建

时间:2020-05-20
本文章向大家介绍react-native基础环境搭建,主要包括react-native基础环境搭建使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前言

native的环境搭建尤其是mac的电脑,无论是沙盒环境还是真实开发环境,都要能使用chrome访问外.....网否则会出现无法下载依赖的情况
这里讲的是native的沙盒环境使用,主要是想要学习react-native的人,因为沙盒环境造实际开发环境要简单不少,少了很多配置
手机和电脑的网络要使用同一个,否则会出现问题

环境准备

node

官网上下载安装node12稳定版

expo

终端输入

npm install -g expo-cli

expo软件

手机中安装一个软件叫做Expo,注意这个软件要科//学//上//网下载才行,这个用于展示react-native的项目

手机

手机打开设置->开发者模式->usb调试,有的手机打开调试后会让你选择usb调试功能,我们选择“传输文件”.我们在创建
手机和电脑的网络要使用同一个,否则会出现问题

网易mumu模拟器

网上有很多种模拟器,综合使用后,我认为最适合的还是网易的这款模拟器.我们去官网上下载,mac电脑会提示权限问题,没关系直接按照提示操作就好
模拟器内要安装一个软件叫做Expo,直接把下载好的expo软件包拖入模拟器内部就可以完成安装了,模拟器也要打开usb调试

正式开发

初始化一个项目

expo init 项目名称

输入回车,开始创建项目,项目创建可能较慢,建议选择网络好的时段
项目创建完成后,输入yarn start运行项目,浏览器弹出如下界面

移动端去链接创建好的项目

移动端去链接创建好的项目,不同的设备可能会出现链接方面的问题,所以这里讲解两种移动端预览react-native的方法,手机和网易mumu模拟器

网易mumu链接项目

点击rn页面的启动android,模拟器会自动启动expo软件

模拟器显示这个界面就表示链接成功,手机连接也是一样显示该界面说明链接成功

手机链接

手机可以通过扫描rn页面de二维码实现链接,当显示“Open up App.."时表示链接成功

结尾

链接成功后就可以开始正式开发了

原文地址:https://www.cnblogs.com/liuXiaoDi/p/12923008.html