使用React Native构建App

640?wx_fmt=jpeg

Linux编程 点击右侧关注,免费入门到精通! 640?wx_fmt=jpeg


作者丨whjin

https://segmentfault.com/a/1190000018853638


搭建开发环境


安装react-native-cli:npm i -g react-native-cli


Android SDK


安装Android SDK并启动进行配置:

 
 


export ANDROID_HOME=~/Library/Android/sdk

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools


Android 虚拟机


设定Genymotion的Android SDK 位置(Android SDK 的路径可以在 SDK Manager 上找到)。


模拟器


有多款模拟器可供选择,Android Studio自带,Genymotion和夜神模拟器,推荐选择夜神模拟器。


配置方法:


在Nox/bin目录运行nox_adb.exe connect 127.0.0.1:62001,如果失败,使用adb devices查询,出现版本不一致的情况,可以把Android/sdk目录下的adb.exe拷贝到Nox/bin下,并改名为nox_adb.exe,反过来操作也是可以的。


分别打开Android Studio和夜神模拟器,此时运行命令nox_adb.exe connect 127.0.0.1:62001基本上都会成功。


新建React Native项目


运行react-native init project-name,进入project-name文件夹安装依赖npm i并运行react-native run-android或react-native run-ios构建App。


以Android App为例,在Android Studio打开Android文件夹(注意:此处是Android文件夹,不是project-name项目文件夹)。


在C:\Users\user\.gradle\wrapper\dists目录下放入对应文件,文件下载地址Gradle


640?wx_fmt=jpeg
640?wx_fmt=jpeg


运行项目


这一步很关键,配置java的环境变量,首先是JAVA_HOME和ANDROID_HOME:在Path项中添加下图中变量:


1.JAVA_HOME,变量值为D:\Android\sdk;


2.ANDROID_HOME,变量值为D:\Android\sdk;


3.然后在Path项中添加jdk和jre下的bin目录;


4.以上是用户变量配置,下面进行系统变量配置:


640?wx_fmt=jpeg


同时打开Android Studio、Nox并在AS中打开项目中的Android文件夹。


运行nox_adb.exe connect 127.0.0.1:62001连接AS和Nox,然后再运行react-native run-android,此时就会构建Android App,


640?wx_fmt=jpeg


关闭端口冲突:lsof -n -i4TCP:8081,kill -9 <PID>


 推荐↓↓↓ 

640?wx_fmt=png

?16个技术公众号】都在这里!

涵盖:程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。

640?wx_fmt=png万水千山总是情,点个 “ 好看” 行不行


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值