react native android(React Native和Android整合详解)

一、React Native常用组件在Android和IOS上的不同

1.1.1只指定font,不指定height

在这种情况下，Text组件在两个平台上显示都正常。

可以看到，在垂直方向上，Text组件要比字高，上下都留有富余的空间，这样显示出来美观。但如果仔细看，就会发现Android平台的显示下方所留的控件比IOS平台的显示下方所留的空间要小一些。在IOS平台上，上下富余的空间基本相等；而在Android平台上，上方富余空间的高度大概下下方空间的1.5倍。

1.1.2只指定height，不指定fontSize

在这种极端情况下，不论height是何值，fontSize的值都是13。

1.1.3 fontSize等于height

在这种情况下，IOS平台和Android平台的表现不同。在IOS平台上，字的上方还有空间，但字的最下一部分没有显示出来。在Android平台上，这种情况更严重。

1.1.4 height大于fontSize

在IOS平台上，当height等于fontSize的1.2倍时，显示效果与只指定fontSize、不指定height类似。如果height继续增大，此时Text组件中显示字符的上方空间保持不变，而下方空间会随着height的增大而增大。

在Android平台上，当height等于fontSize的1.35倍时，显示效果与只指定fontSize、不指定height类似。如果height继续增大，此时Text组件中显示字符的上方空间保持不变，而下方空间会随着height的增大而增大。

1.2边框在两个平台上的不同表现

在样式中设置边框，比如“borderWidth:1”。

在IOS平台上，能够出现预想的边框效果。

在Android平台上，边框不会出现。

为了实现在Android平台上Text组件有边框，需要用一个View组件包裹Text组件。而这个View组件只需要有一个样式boderWidth。这种方式可以适用于两个平台。

二、react native 怎么统一android和ios的数据

先来看一个简单的demo，如何在RN中调用Android原生的的Toast模块。

index.android.jsvar React= require('react-native');

var{

ToastAndroid,

}= React;

...

ToastAndroid.show('This is a toast with short duration', ToastAndroid.SHORT)

index.android.js是ReactNative的入口文件，后缀Android表示是在Android平台使用的代码。ReactNative内置了babel，所以可以使用最新的JavaScript语法来开发（ECMAScript6简称es6），不熟悉es6的同学可以看看阮一峰写的这本[e6入门教程](ECMAScript 6入门)。这里我简单介绍一下require，Android程序员可以把require对应到Java的import，使用来导入一个JavaScript模块的。`var{ToastAndroid}= React`这种写法叫结构赋值，就是从React这个对象中，提取出ToastAndroid这个属性所对应的值，并赋值给ToastAndroid这个变量。可以看出toast模块就是从react-native这个模块中的ToastAndroid属性，js中的Toast模块API和Android中的JavaAPI基本是保持一致的。

三、如何在Android和iOS平台运行React Native应用

如果你还没有配置React Native开发环境，请访问：一步一步搭建ReactNative开发环境(Mac)

Android依赖的安装需要较多的步骤，安装的方法也有很多，接下来跟着我一步步的完成Android依赖的安装吧。

一、Android依赖

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

1、如何安装jdk

（1）请前往链接：

（2）按照下图点击下载

（3）下载安装完以后，在终端输入java-version

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

2、通过命令brew install android-idk安装Android SDK。

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并接受合适的许可。等待安装完成需要花一段时间。

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

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

（2）add the following to your~/.bashrc

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

~/.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

键盘输入enter得到AVD管理器

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

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

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

二、创建新应用

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

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

三、将程序运行的iOS端有两种方式

1、方式一

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

2、方式二

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

四、如何在Android端运行React Native程序

1、首先需要启动模拟器

启动模拟器有两种方式：

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

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

2、通过react-native run-android命令安装react native程序到Android上

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

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