资讯专栏INFORMATION COLUMN

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

Donald / 508人阅读

摘要:闭上眼睛,心中默念一百遍遍马力马力轰,再睁开眼,如果你是安卓及以上系统,你就能在你手机上看到你第一个应用了图,如果是以下,嘿嘿,一个血红血红的界面,不过没关系,我们来纠正它。

        前期准备工作已经完成,接下来将正式进入开发了,请深呼吸下,呵呵。我们首先写个Hello World工程来练练手。
        在命令行上点右键,选择以管理员身份运行。建议每次运行命令行的时候都用管理员身份运行,否则你经常会碰到权限之类的错误。
        再切换到你的开发目录,保证你的网络是顺畅的,在命令行运行(图1):

react-native init HelloWorld

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

        项目初始化成功后,你会发现在你的开发目录下多了一个HelloWorld目录,这个就是你的RN工程了。接下来的事情就都是在这个目录下操作。用记事本打开该目录下的的androidappuild.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:JDKSandroid-sdk_r24.4.1-windowsandroid-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用户名.gradlewrapperdistsgradle-2.4-all随机目录下面),然后重新运行react-native init HelloWorld即可。当然最好的办法是把gradle-2.4-all.zip放到自己的web服务器上,然后修改androidgradlewrappergradle-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:一定要记得以管理员身份运行所有命令行哦




文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/18993.html

相关文章

  • 步一开发安卓下的react-native应用系列之前言

    摘要:这里是目录一步一步开发安卓下的应用系列之环境搭建篇一步一步开发安卓下的应用系列之第一个应用一步一步开发安卓下的应用系列之进阶篇怎么开发原生模块打包分发你的实现在线升级,包括热更新篇篇篇         公司今年效益惨淡,手头上没什么事可作,于是琢磨着自己做点什么,想了想,如今RN那么火热,那就整个APP出来玩玩吧。因为之前没怎么学过reactjs,更没有安卓系统开发经验,所以从过完年开...

    lewif 评论0 收藏0
  • 步一开发安卓下的react-native应用系列之进阶篇

    摘要:首先我们打开命令行,切换到项目根目录下,输入安装完成后,请注意,需要把目录下的所有字体文件拷贝到目录下,如果没有该目录,请自行创建。         看过我前面文章的朋友们现在应该能正常运行自己的第一个RN应用了,那都是小儿科,现在我们来做点进阶一点的东西。这篇文章有一些属于干货性的东西,请仔细阅读。特别需要注意我加粗的部分。        首先我们来看下js文件结构,在项目初始化成功...

    xioqua 评论0 收藏0
  • [React Native Android安利系列]搭建React Native Android环境

    摘要:环境首先,我们需要搭建一个开发环境。在终端下,直接执行命令进行查看,如果没有,请百度安装与环境变量配置。如图图不过,如果你运行到了这一步,恭喜你,你已经将的安卓项目成功的编译并安装到手机上了。 欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有https://segmentfault....

    pf_miles 评论0 收藏0
  • 零基础用react-native开发android app

    摘要:序基于雨点儿网,分享开发的方法。本文只讨论基本的概念及开发流程。或者开发的,用的本地的组件以及布局。之所以这样做是为了方便调试。我们很多时候是想用别人的一个开源项目做二次开发。相信后面的版本会马上会发布自动导资源的命令。 序 基于雨点儿网,分享react-native开发android app的方法。这篇博客旨在帮没有任何android或者ios开发经验的开发者体验一把当下热门的rea...

    sorra 评论0 收藏0
  • 在Windows环境下配置Android的React-Native环境

    摘要:最近公司要在这方面挖坑,然后一致决定来让我采坑。和是到各自官网下载安装的。正确的设置姿势为打开的界面的左上角标记了那么的环境变量则为如果的工具包没有按照需要的安装齐全,也会报同样的错误。最重要的还是面向和面向解决问题。 最近公司要在RN这方面挖坑,然后一致决定来让我采坑。我是Windows党,用的安卓手机,自然而然就这样开始配置环境了 官方的配置步骤 英文版:https://faceb...

    LeviDing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<