美文网首页
react native环境搭建

react native环境搭建

作者: 世界在脚下vip | 来源:发表于2018-02-24 15:19 被阅读0次

1.sdk及jdk的安装

2.c++运行环境安装

3.安装node.js 和 github

4.设置npm镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

5.安装react-native包下的
1)先从github下载facebook/react-native的zip包
2)解压到指定目录
3)运行github的命令行工具
4)进入解压后的目录的react-native-cli目录
5)运行:npm install -g react-native-cli

6.创建项目
1)在指定文件夹创建新工程
2)运行github的命令行工具,进入刚才新建的目录
3)运行:react-naive init 你的工程名称(英文、驼峰命名法)

7.进入工程目录运行:react-native start
1)进入刚才第6步创建的工程目录 再运行启动命令(也是在github的命令行工具中
执行)
2)检查服务是否开启:(注意教程里是index.android.bundle 因为版本迭代入口改为了
index.js 所以为下面的链接地址)
在google浏览器中输入
http://localhost:8081/index.bundle?platform=android

8.新开一个git命令行窗口,进入工程目录(我的为AsiaSun文件夹)运行:react-native run-android
1)如果提示找不到android_home环境变量的话 请在电脑的系统环境变量里加入并指向android_sdk目录
然后关闭报错的窗口重新打开新的git命令行窗口

2)运行手机上的app显示红屏的话是没有连接到pc端,我这里wifi是屏蔽了ip客户端直接通信的。所以
我自己开了个移动wifi,其主要目的就是让pc端和手机端在一个网段上可以通信。

3)在手机端进入装好的app,点menu键进入设置菜单 选择-〉Dev Setting -〉Debug server host & port fro device
设置pc的无线ip地址和端口8081

设置完成后reload
4)网上说的: reverse tcp:8081 tcp:8081 不能适用于版本低于5.0的android手机,我的手机是4.4.4的版本所以该命令不适合                   我的手机

完成了就显示白色的连接成功的页面!
测试: 可以通过修改app.js文件 测试是否能显示修改后的文件 判断是否连接服务器正确。

相关文章

网友评论

      本文标题:react native环境搭建

      本文链接:https://www.haomeiwen.com/subject/hogqxftx.html