一步一步开发安卓下的react-native应用系列之第一个RN应用

2019年10月2日 256次阅读 来源: crazy_mule

        前期准备工作已经完成，接下来将正式进入开发了，请深呼吸下，呵呵。我们首先写个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文件（也可能是其它版本）下载或者解压失败，你可以按照报错信息手动下载https://services.gradle.org/d…这个文件，然后解压到相应目录下（一般在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应用系列之第一个RN应用》
《一步一步开发安卓下的react-native应用系列之第一个RN应用》
《一步一步开发安卓下的react-native应用系列之第一个RN应用》
《一步一步开发安卓下的react-native应用系列之第一个RN应用》

    原文作者：crazy_mule
    原文地址: https://segmentfault.com/a/1190000009026331
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞