育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]如何在Android和iOS平台运行React Native应用

[技术文章]如何在Android和iOS平台运行React Native应用

时间:2016-09-22 17:55:47  来源:育知同创  作者:育知

  • 如果你还没有配置React Native开发环境,请访问:一步一步搭建React Native开发环境(http://www.yztcedu.com/articlenews/rn20160817.html)

    Android依赖的安装需要较多的步骤,安装的方法也有很多,网上的文章包括facebook的官网很多童鞋看了以后也是一头雾水,不管花猫黑猫,只要最终能解决问题就是好猫,接下来跟着我一步步的完成Android依赖的安装吧。

     

    Android依赖的安装

     

     关于Android依赖的安装,大概分为三个步骤:

    1、如何安装jdk

    (1)请前往链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    (2)按照下图点击下载

    1.jpg

    (3)下载安装完以后,在终端输入java -version

    2.jpg

     如上图所示,即表示jdk安装成功。

    2、Android SDK的安装

    3.jpg

     

    3、actual SDK stuff、环境变量和AVD的创建

     (1)run the ‘android’ tool to install the actual SDK stuff.

    执行android命令,从而打开Android SDK管理器,如下图所示,管理器将会显示出安装包的安装情况。Android SDK 管理器允许你选择开发包进行安装。PS:我用红线框起来的部分,即1、2、3、4、5必须要确保选中,然后点击install packages并接受合适的许可。等待安装完成需要花一段时间。

    4.jpg

    5.jpg

    6.jpg

     其中2、3、5使我们能够创建Android虚拟设备(Android Virtual Devices,AVDs),或模拟器。

    8.jpg

    PS:安装完成后,选中安装的选项的Not installed都会变成installed

     

    (2)add the following to your ~/.bashrc

    PS:通过vi创建.bashrc文件,往文件中输入export ANDROID_HOME=/usr/local/opt/android-sdk内容保存并且退出

    9.jpg

    ~/.bashrc文件保存退出后,需要执行source ~/.bashrc 让其立即生效,否则可能会出现如下bug:

    SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable. (PS:此处感谢RN技术交流群:555705178中的小伙伴:qq:419136078 昵称:蜀中阆子)

     

    (3)通过AVD管理器创建和运行模拟器

    在终端输入android avd

    22222222.jpg

    键盘输入enter得到AVD管理器

    QQ图片20160922181519.jpg

    点击create按钮并且填写创建模拟器的相关信息,如下图所示,对于模拟器选项,记得勾选Use Host GPU

    11.jpg

    上图中,除了填好相关信息以外,确保够炫了Use Host GPU,否则模拟器会非常慢

    如果愿意的话,你可以创建许多AVD。由于android设备种类繁多,有不同的屏幕尺寸,分辨率和功能,因此使用不同的模拟器通常能为测试带来帮助。当然,处于学习的目的,我们只需安装一两个即可。

     

    React Native应用初始化

    你可以使用React Native命令工具来创建一个新的应用,它会为你生成一个包涵React Native、iOS和Android的全新模版工程:

    12.jpg

    这一块windows安装一般6分钟左右,因为它只支持Android,如果是mac安装,大概需要十多分钟,它同时支持iOS和Android,所以包比较大。(PS: 如果翻墙的话,iOS端一般四分钟左右)

    下载完的工程目录如下图所示:

    13.jpg

    上图中的1为React Native代码iOS端的入口,2为Android端的入口,3为iOS原生代码,4为Android原生代码。

     

    React Native应用运行在iOS端的两种方式

     

    方式一:

    通过Xcode直接打开iOS应用,运行即可。如下图所示。

    14.jpg

    方式二:

    先将终端、Xcode、模拟器退出,然后重启终端,在终端中切换到项目路径,再在终端中输入react-native run-ios

    15.jpg

     

    如何在Android端运行React Native应用程序

     

    1、首先需要启动模拟器

    启动模拟器有两种方式:

     

    方式一:如下图所示,1终端输入android avd,输入enter启动AVD管理器,2选中模拟器,3点击Start启动模拟器

    16.jpg

    方式二:打开终端,1在终端中输入emulator -list-avds查看安装哪些模拟器,2通过emulator @模拟器名字启动模拟器。

    17.jpg

    2、终端之行react-native run-android命令

    PS:第一次使用react-native run-android命令时,因为需要下载很多配置文件,所以需要耐心等待,以后就不需要等待了

    接下来我通过command+n新建一个终端,1首先先切换到项目路径,再在终端中输入react-native run-android命令,如下图所示:

    18.jpg

    福利

    React Native全栈工程师技术交流群:555705178               

    育知同创YZMobileTalks团队博客:http://www.52learn.wang

    育知同创YZMobileTalks团队Github:https://github.com/YZMobileTalks

     

    19.jpg

     
     
    相关文章

    [技术文章]3分钟搞定React Native自定义组件之props属性

    [技术文章]一步一步搭建RN开发环境





上一篇:[技术文章]3分钟搞定React Native自定义组件之props属性

下一篇:逾八成用户看好HTML5开发,已成大势所趋


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号