开发者社区> 凌浩雨> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React Native环境搭建

简介: React-Native 中文网 React-Native 官网 1. Python2 2. Node # 设置镜像源 npm config set registry https://registry.
+关注继续查看

React-Native 中文网

React-Native 官网

1. Python2

2. Node

# 设置镜像源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.Yarn、React Native的命令行工具(react-native-cli)

# 安装yarn和React-native-cli
npm install -g yarn react-native-cli
# 设置镜像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
  • 创建项目
# 初始化项目
react-native init abcd
# 运行项目
react-native run-android

4. 设备上运行

$ adb devices
List of devices attached
emulator-5554 offline   # Google模拟器
14ed2fcc device         # 真实设备

5. 设备上访问开发服务器

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

注意,这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。
首先把你的设备通过USB数据线连接到电脑上,并开启USB调试(关于如何开启USB调试,参见上面的章节)。

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

2). (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`。

6. 项目效果

img_294c1f33180852db5a11491a2489781a.png
效果.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
React安装 环境搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34173549/article/details/80935055 Rea...
781 0
React+NodeJS+Express 环境搭建与部署
链接 Mac安装nodejs和npm 替换为cnpm 使用create-react-app快速构建开发环境 使用npm init创建项目 配置webstorm 安装nodemon 使用webpack 部署神器pm2 部署到Linux 1 链接 个人博客: alex-my.xyz CSDN: blog.csdn.net/alex_my 前面 2-8
5238 0
Webpack+Babel+React环境搭建
前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。
1436 0
React-Native windows环境搭建记录
React-Native环境我也是折腾了两天才搭建好,并且在模拟器和真机上运行。 其中踩过的坑更是多的数不清。 但我始终坚持我的信条:只要是困难,就能解决。
1184 0
+关注
凌浩雨
毕业于贵州大学大数据与信息工程学院,目前是一名移动端工程师,就职于北京乾元大通信息技术有限责任公司。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
React Native 全量化实践—web 技术打造移动研发新模式
立即下载
搭建React Native生态
立即下载
React在大型后台管理项目中的工程实践
立即下载