当前位置: 首页 > 后端技术 > Node.js

一步步开发出Android下react-native应用系列的第一个RN应用

时间:2023-04-03 20:13:03 Node.js

准备工作已经完成,接下来就是正式进入开发了。请深吸一口气,嘿嘿。我们先写一个HelloWorld项目来练习一下。右键单击命令行并选择以管理员身份运行。建议每次运行命令行都以管理员身份运行,否则经常会遇到权限等错误。然后切换到你的开发目录,确保你的网络畅通,在命令行运行(图1):react-nativeinitHelloWorld,然后耐心等待,一般10分钟以上。可能会遇到shasumcheckfailed等错误(基本是网络原因造成的),重新运行react-nativeinitHelloWorld即可。项目初始化成功后,你会发现你的开发目录下多了一个HelloWorld目录,就是你的RN项目。接下来就是在这个目录下操作了。用记事本打开该目录下的android\app\build.gradle文件,找到android{compileSdkVersion22buildToolsVersion"23.0.1"defaultConfig{applicationId"com.poemproject"minSdkVersion16targetSdkVersion22versionCode1versionName"1.0"ndk{abiFilters"armeabi-v7a","x86"}}...将compileSdkVersion后面的数字改成上一篇环境配置中的API版本号。比如我前面选择的是23,那么这里应该把22改成23。将buildToolsVersion后面引号中的数字更改为您的AndroidSDK构建工具版本号。前面选择的是24,所以这里把23.0.1改成24.0.0。一定要在最后加上.0.0,否则会报错。这个版本号对应AndroidSDK目录下build-tools目录下的对应目录。查看android目录下是否有local.properties文件,如果没有,用记事本新建一个,然后输入:sdk.dir=D\:\\JDKS\\android-sdk_r24.4.1-windows\\android-sdk-windows将目录更改为您实际的androidsdk目录以连接您的手机,并将USB连接选项更改为相机(PTP)连接。确保USB调试模式已打开。然后在命令行运行adbdevices,查看是否可以正常识别你的设备。如果能正常识别,切换到HelloWorld目录,然后运行:react-nativerun-android系统会默认打开另外一个命令行窗口运行packageserver(图4)。(当然你也可以手动运行react-nativestart打开packageserver,然后新开命令行运行react-nativerun-android)。又是一个漫长的等待(这里,如果你的Android版本是5.0以上,react-nativerun-android会默认执行命令adbreversetcp:8081tcp:8081,这样手机才能访问开发服务器,如果没有要执行,你在命令行手动执行adbreversetcp:8081tcp:8081,然后运行react-nativerun-android)。如果你的Android版本低于5.0,则不需要进行此操作,后面会进行设置。下载过程中,可能会因为网络原因导致gradle-2.4-all.zip文件(或其他版本)下载或解压失败。可以手动下载https://services.gradle.org/d..这个文件,然后解压到对应目录下(一般在C:\Users\username\.gradle\wrapper\dists\gradle-2.4-all\random目录),然后重新运行react-nativeinitHelloWorld。当然,最好的办法是把gradle-2.4-all.zip放到自己的web服务器上,然后修改android\gradle\wrapper\gradle-wrapper.properties文件中distributionUrl后面的地址为你的文件地址网络服务器。这可以大大加快下载速度。闭上眼睛,在心里默念麻麻麻砰一百遍,然后睁开眼睛。如果你有Android5.0以上系统,你就可以在手机上看到你的第一个RN应用(图3)。如果是5.0以下,哎,就是血红色的界面,不过没关系,我们改正吧。确保包服务器正在新打开的命令行窗口中运行(图4)。如果报错停止,可以在HelloWorld目录下重新运行react-nativestart来开启服务。然后确保手机开启了WIFI,并且和电脑处于同一网段。必须在同一网段,然后摇动手机,在弹出的菜单中选择DevSettings(图2),然后选择Debugserverhost&portfordevice,在里面输入你电脑的ip地址和端口号8081输入框(端口号是固定的),比如192.168.10.1:8081,点击OK,然后摇晃设备,在弹出的菜单中选择Reload,就可以看到正常的RN界面(图3)。编译过程中也可能会报一些莫名其妙的错误。您可以根据错误提示解决。对于拒绝访问等一些错误,只需要重新运行react-nativerun-android即可大致解决。接下来,让我们改变一些东西。用记事本打开根目录下的index.android.js,然后改WelcometoReactNative!世界您好!保存之后,再次摇一摇手机,点击Reload,你会发现欢迎界面变了,是不是很简单,是不是很酷,是不是很酷,哈!PS:一定要记得以管理员身份运行所有命令行