博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一步一步开发安卓下的react-native应用系列之第一个RN应用
阅读量:6990 次
发布时间:2019-06-27

本文共 2502 字,大约阅读时间需要 8 分钟。

        前期准备工作已经完成,接下来将正式进入开发了,请深呼吸下,呵呵。我们首先写个Hello World工程来练练手。

        在命令行上点右键,选择以管理员身份运行。建议每次运行命令行的时候都用管理员身份运行,否则你经常会碰到权限之类的错误。
        再切换到你的开发目录,保证你的网络是顺畅的,在命令行运行(图1):

react-native init HelloWorld

你就开始耐心的等待吧,一般都要等10多分钟。这其中可能会遇到诸如shasum check failed此类错误(也基本上是网络原因导致的),重新运行下react-native init HelloWorld即可。

        项目初始化成功后,你会发现在你的开发目录下多了一个HelloWorld目录,这个就是你的RN工程了。接下来的事情就都是在这个目录下操作。用记事本打开该目录下的的android\app\build.gradle文件,找到

android {    compileSdkVersion 22    buildToolsVersion "23.0.1"       defaultConfig {        applicationId "com.poemproject"        minSdkVersion 16        targetSdkVersion 22        versionCode 1        versionName "1.0"        ndk {            abiFilters "armeabi-v7a", "x86"        }     }    ...

将compileSdkVersion 后面的数字改成你在上一篇环境配置中API本版号,比如我前面选的是23,这里应该将22改成23。将buildToolsVersion后面引号里的数字改成你的Android SDK Build-tools版本号,我前面选的是24,所以这里把23.0.1改成24.0.0。后面一定要加.0.0,否则就会找报错,这个版本号对应Android SDK目录下build-tools目录下对应的目录。

        查看android目录下有无local.properties文件,如果没有的话就用记事本新建一个,然后在里面输入:

sdk.dir=D\:\\JDKS\\android-sdk_r24.4.1-windows\\android-sdk-windows

将目录改成你实际android sdk的目录即可

        连接你的手机,将USB连接选项改成相机(PTP)连接。确保USB调试模式打开。然后在命令行运行adb devices再检测下是否能够正常识别到你的设备,如果能正常识别就切换到HelloWorld目录,然后运行:

react-native run-android

系统会默认另外打开一个命令行窗口运行package server(图4)。(当然你也可以先手动运行react-native start打开package server,然后再新开一个命令行运行react-native run-android也行)。又是一阵漫长的等待(在这里如果你的安卓系统版本5.0或以上,react-native run-android默认会执行adb reverse tcp:8081 tcp:8081这个命令,这样手机就能访问开发服务器了,如果没有执行,你就手动在命令行执行adb reverse tcp:8081 tcp:8081,然后再运行react-native run-android)。如果你的安卓版本低于5.0,就无须进行此操作,后续再来设置。在下载过程中可能会因为网络原因导致gradle-2.4-all.zip文件(也可能是其它版本)下载或者解压失败,你可以按照报错信息手动下载这个文件,然后解压到相应目录下(一般在C:\Users\用户名\.gradle\wrapper\dists\gradle-2.4-all\随机目录下面),然后重新运行react-native init HelloWorld即可。当然最好的办法是把gradle-2.4-all.zip放到自己的web服务器上,然后修改android\gradle\wrapper\gradle-wrapper.properties文件中distributionUrl后面的地址为你web服务器上的文件地址,这可以大大加快下载速度。

        闭上眼睛,心中默念一百遍遍马力马力轰,再睁开眼,如果你是安卓5.0及以上系统,你就能在你手机上看到你第一个RN应用了(图3),如果是5.0以下,嘿嘿,一个血红血红的界面,不过没关系,我们来纠正它。确保新开的那个命令行窗口中package server正在运行中(图4),如果报错停止了,你就在HelloWorld目录下重新运行react-native start以打开此服务。然后确保手机开启WIFI并跟电脑是在同一个网段内,一定要在同一网段内哦,然后摇动下你的手机,在弹出的菜单中选择Dev Settings(图2),然后选择Debug server host& port for device,在输入框里输入你电脑的ip地址和端口号8081(端口号是固定死的),比如192.168.10.1:8081,点确定,再摇动下设备,在弹出的菜单里选Reload,你就可以看到正常的RN界面了(图3)。编译过程中也可能会报一些莫名其妙的错误,你可以根据报错提示来解决,一些比如拒绝访问等之类的错误等则只要重新运行下react-native run-android一般就能解决了。

        接下来我们改点什么东西吧,用记事本打开根目录下的index.android.js,然后把Welcome to React Native!改成Hello World!保存后,再摇一摇手机,点Reload,你就会发现欢迎的界面变了,是不是很简单,是不是很爽,是不是很酷,哈!

        PS:一定要记得以管理员身份运行所有命令行哦

react-native init HelloWorld

5.0以下系统默认安装后红色报错界面
应用安装成功画面
package server

转载地址:http://aczvl.baihongyu.com/

你可能感兴趣的文章
英特尔Atom推16内核芯片更新至强单片机
查看>>
思科警告:旗下某些产品可能存在无法修补的WannaCrypt漏洞
查看>>
《中国人工智能学会通讯》——9.14 从多标记学习到标记分布学习
查看>>
Verizon PCI报告:防火墙合规性、安全测试是主要问题
查看>>
镖狮网裴向宇谈互联网营销的创业之路
查看>>
构建物联网云平台 “搞活”数据价值
查看>>
国家命脉产业涉密数据 需制度技术双保险
查看>>
硬盘灾后价格依旧:两年内恐难降价
查看>>
子域名枚举、探测工具AQUATONE 使用指南
查看>>
后Hadoop时代的大数据架构
查看>>
《数据虚拟化:商务智能系统的数据架构与管理》一 1.4 什么是数据虚拟化
查看>>
《逻辑与计算机设计基础(原书第5版)》——1.9 习题
查看>>
Joomla 对象注入漏洞分析报告
查看>>
停止去人性化吧 SOC应找回人的元素
查看>>
合力亿捷云客服3.0 开启“全员客服”新时代
查看>>
2016年全球网络空间安全大预测
查看>>
你知道国家教育部是如何实现全国数据大集中的吗?
查看>>
北京邮电大学计算机与围棋研究所所长刘知青:AlphaGo与柯洁人机大战展望
查看>>
光网络发展趋势:SDN可预见
查看>>
程序员未来发展三大方向
查看>>