从零开始 React Native(7) 搭建React Native 环境

来源:互联网 发布:虚拟打印机软件 编辑:程序博客网 时间:2024/06/06 10:04

React-Native官方
https://facebook.github.io/react-native/docs/getting-started.html

python地址
https://www.python.org/

注意 jdk 必须1.8

python2安装
配置python环境变量

下python 2.7 的 3.0 的React Native 不认识

然后就是一系列的命令

安装react-native
npm install -g react-native-cli

初始化(first 是项目名称 这里需要cd到指定的项目目录下 )
react-native init first
启动
cd first
react-native start

发布运行到模拟器(模拟器用studio的就行 记住把加速打开)
cd first
react-native run-android
小写

更新问题(改变了代码后 按下键盘r 就可以刷新界面了)

下面是模拟器的参数
hdpi

WVGA800

注意啊: 打开模拟器后 运行命令 不会自动打开项目, 必须自己手动去点..我在这里卡住N久

前提条件:USB调试
你需要开启USB调试才能在你的设备上安装你的APP。首先,确定你已经打开设备的USB调试开关

确保你的设备已经成功连接。可以输入adb devices来查看:

$ adb devices
List of devices attached
emulator-5554 offline # Google模拟器
14ed2fcc device # 真实设备
在右边那列看到device说明你的设备已经被正确连接了。注意,你只应当连接仅仅一个设备。

译注:如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保adb devices的输出只有一个是连接状态。

现在你可以运行react-native run-android来在设备上安装并启动应用了。

译注:在真机上运行时可能会遇到白屏的情况,请找到并开启悬浮窗权限。比如miui系统的设置在此处。

提示
你还可以运行react-native run-android –variant=release来安装release版的应用。当然你需要先配置好签名,且此时无法再开启开发者菜单。注意在debug和release版本间来回切换安装时可能会报错签名不匹配,此时需要先卸载前一个版本再尝试安装。
从设备上访问开发服务器。
在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果。按照下面描述的任意一种方法来使你的运行在电脑上的开发服务器可以从设备上访问到。

注意
大部分现代的安卓设备已经没有了硬件”Menu”按键,这是我们用来调出开发者菜单的。在这种情况下你可以通过摇晃设备来打开开发者菜单(重新加载、调试,等等……)
(Android 5.0及以上)使用adb reverse命令
注意,这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。
首先把你的设备通过USB数据线连接到电脑上,并开启USB调试(关于如何开启USB调试,参见上面的章节)。

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

0 0
原创粉丝点击