如何覆盖 React Native 功能测试 - 行业应用 - ITeye资讯
相关知识库：
已经介绍了如何在浏览器运行时测试。本篇介绍如何对 Native 的渲染进行测试，覆盖 React Native 的功能测试等同于覆盖 Native 的测试，需要 iOS, Android 的系统运行时环境。此类端对端测试使用Macaca的Native配置即可。
示例
本示例以 React 组件为例说明，对 UI 功能进行一些操作，配合截图等方式辅助校验。
describe('base', function() {
this.timeout(5 * 60 * 1000);
var driver = wd.initPromiseChain();
driver.configureHttp({
timeout: 300 * 60 * 1000
before(function() {
return driver
.initDriver();
after(function() {
return driver
.sleep(1000)
it('#1 login picture should be the same.', function() {
return driver
.sleep(40 * 1000)
.waitForElementByName('autoresponsive')
.takeScreenshot()
.then(imgData =& {
var newImg = new Buffer(imgData, 'base64');
var screenshotFolder = path.resolve(__dirname, '../screenshot');
var oldImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'android.png' : 'ios.png');
var diffImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'android-diff.png' : 'ios-diff.png');
return diffImage(oldImgPath, newImg, 0.3, diffImgPath);
.then(result =& {
result.should.be.true();
.catch(e =& {
console.log(e);
如何配置 Native-CI
Native-CI 非常重要，同样，Macaca配置React Native UI测试环境也非常方便，只是需要注意测试之前要通过Build流程。
更多的CI配置也可以访问Macaca。
Comparison
Image diff 是个很实用的辅助测试手段，对UI进行截图与预期图片对比，可以得出功能测试结果是否符合预期：
如下图就是个例子：
本文示例代码见：
本文来自：
相关资源推荐React Native Android 踩坑之旅 - 为程序员服务
React Native Android 踩坑之旅
Facebook 在发布了 React Native for Android，把 JavaScript 开发技术扩展到了移动Android平台。基于React的React Native 让前端开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 基于Web，iOS 和 Android 平台的原生应用。在React Native for Android出来之后，本人花了些时间从环境搭建到做出几个demo，从体验来看都挺流畅，具体将此间遇到和问题和具体的新的体会，向大家分享一下。
React Native for Android 和 for IOS的基本原理是一致的，通过android的
JavaScriptCore
来异步解析js代码(jsbundle文件)，然后根据引入的支持和配置，渲染成原生native组件。
复用React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。
环境搭建的话，在网上也找到过很多教程，但是还是推荐还是去看官方文档
，在搭建的过程中可能会遇到一些问题。
在React Native for Android刚出来的时候，官方称是不支持在windows 系统上安装的，只有在mac上才可以使用
，但是最新版的React Native for Android已经支持在windows上使用，
更新React Native的方法：下载最新版的react-native-cli即npm install -g react-native-cli，并且保证node是最新版的即&4.0。
在执行react-native init AwesomeProject 命令时，由于这个命令会去下载一些node module所以要根据自己的实际情况设置npm的代理和镜像，本人就曾经因为这个问题搞了很久才成功，可以安装nrm(npm install -g nrm)来便捷设置npm的代理和镜像，其次是执行这个命令必须现在
机器上装有git
，并且设置好git的环境变量，另外这个命令需要等待一些时间，不要提前取消。
在调用react-native run-android的命令时，有时会报出找不到android-sdk环境变量的错误（自己确实已经正确设置环境变量）提示例如
的错误时，可以单独在项目根目录下，
也就是AwesomeProject/新建一个local.propertites文件
，添加sdk.dir=你的android的sdk目录，然后在运行react-native run-android。
在调用react-native run-android命令时，其实这个命令就是执行的两部分操作一是是构建你的android项目并生成apk，另外一个是打开react-native的package管理工具同时编译你的js文件，其实可以在项目根目录的package.json下找到
其实是执行了另外一条命令
node node_modules\react-native\packager\packager.js
来打开package的管理工具，有些可能没打开一个新的命令行窗口，自己手动执行这条node命令也是可以的。在这条命令执行完之后，node就会开启一个服务，同时把js文件编译成jsbundle文件，我们可以通过
来访问到这个文件，可以简单将这个文件理解成一个html，
android就是通过解析这个html来达到渲染的目的，将该文件部署到CDN可供android app从网络获取，即可实现不用发版本让app的UI随时更新，并且可获得接近native的体验，这也是react-native最吸引开发者的亮点之一。
用react native命令生成的android项目是基于
构建和部署的(不清楚gradle的可以google)，这个以前一些搞用eclipse来android开发的可能不太一样，gradle是用在google主推的一款android开发IDE，android statio里面默认的项目构建方式，所以我们的项目里会看到一些build.gradle的文件，这些都是配置文件。
我们在根据教程搭环境时会碰到需要安装android模拟器的步骤，这个步骤会提示你安装一个
可以看到这个安装不是必须的，其实这个是一个android模拟器的加速程序，按了这个你的模拟器可能会跑的更快，但是在安装这个程序时，会遇到
的错误是由于CPU的
虚拟化未开启
，需要重新开机在bios上设置一下，具体怎么设置，可以自行google。
react-native android在本地调试开发时，你只需要修改js文件，然后刷新你的项目，所以在创建android模拟器时要记得选择带有android键盘的模拟器，这样才能在模拟器上刷新你的更改。
与现有的android项目集成
想要在现有的android项目里添加react native支持，你必须要先创建一个基于gradle的android项目，推荐使用android studio来创建项目，要记得创建的项目要高于
Android 4.1 (API 16)
的android项目。
用android studio创建一个项目 并且能跑起来，这段教程可以直接去网上少，一般配置无误的情况下，很容易跑出一个android helloword来，你只需要保持之前的node package服务开启，程序依然会去寻找
这个文件的。只是你的android模拟器是通过android studio来管理了。
配置你的结合项目时，还要注意在AndroidManifest.xml文件里面添加
&activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /&
这样才能开启调试模式。
对于android项目来说，react native的支持也是就在Activity里面创建了一个ReactRootView
，对这不是webview，然后将Activity的其他事件生命周期等等都交给react manager来管理，所以对于react native的android页面，就可以简单理解成一个activety里面套一个reactrootview这个view去加载并jsbundle文件，渲染出原生native的ui组件。
远程加载jsbundle文件
目前在react android的官方文档里面，还没有找到如何远程加载jsbundle文件的地方，只能是事先把jsbundle文件放在assets目录下面，
一起打包成apk，也就是release apk文件
，可以参考
样式和布局
react native的代码和react基本一样，组件的生命周期，jsx语法都支持，只是在使用jsx时要经常调用官方提供的组件。
react native里面的样式大部分是可以利用css语法来写的，只有文档里面有的属性才能用，不是所有的css都可以在react native里面用的，采用obj的形式将css属性横杠后面的第一个字母大写即可。
react的宽高度不支持百分比，设置宽高度时不需要带单位，在react native里面默认使用pt为单位，注意在给image设置大小时要根据
设置合适的值。
使用dimensions.get("window")可以获取到当前viewport的大小，这个值可能会根据屏幕横竖来动态改变。
react native里面没有float的用法，是根据flex来布局，alignItems和justifyContent分别决定子元素的布局，而flexDirection决定子元素的排列方式垂直还是水平，flex:number决定子元素所占的比例，alignSelf决定元素本事的布局，子view会默认根据父view来absolute，这里有个技巧，如果想让子view实现100%的效果可以设置left：0 ,right :0,同理height可以用top:0,bottom:0。
使用text的numberOfLines可以实现文本截取省略号，即css的text-overflow属性。
默认情况下如果元素超过了父元素，是不可以滚动的，必须在外部套一个&ScrollView&才可以。
react native里面没有z-index的概念，是根据jsx语法里面定义组件的顺序来实现的，后写的组件会覆盖在先写的组件上。
react native android和ios相比，由于出现的还比较晚一些功能还没有非常完善，所以一些文档里面没有写的东西还需要自己摸索,例如android上使用borderTopLeftRadius没起作用。
react native android在性能上要比web来的好很多，毕竟渲染出来的是原生的组件，尤其是在一些低端android机型上，但是跟真正的native相比还是要逊色一些，但是react native的优势在于一套代码可以跨平台复用，而且可以通过更新远端JS，直接更新app，并且对于前端工程师来说用js的语法写native的组件也并没有很难。
本人用react native android做出的demo，大家可以体验一下。
不断跟新中
参考资料：
腾讯全端 AlloyTeam 团队 Blog
原文地址：, 感谢原作者分享。
您可能感兴趣的代码今天我们继续来一个Android、iOS平台通用的弹出框Alert模块。
刚创建的React Native技术交流2群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该Alert模块是创建弹出一个弹框，显示一个标题以及相关信息内容。该弹出框可以提供一系列的可选按钮，点击任何一个按钮都会调用onPress方法并且关闭弹框。默认情况下，该只会显示一个'确定'按钮。
该模块API是在Android、iOS平台通用的显示静态的弹框。如果需要显示一个提示框可以让用户输入相关信息的，详细;该带输入框的弹框只适用于iOS平台。
(二)iOS平台相关
只有iOS平台可以指定多个数量的button,每个按钮都可以设置特殊的风格，不过风格为'default','cancel','destructive'三种状态之一。
(三)Android平台相关
iOS平台可以指定多个数量的button，但是在Android平台上面最多只能指定三个按钮。Android平台的弹出框的按钮有'中间态','取消','确认'三种状态
1.如果你只有指定了一个按钮，那么该为'positive' (例如:确定)
2.如果你指定了两个按钮，那么该会'negative','positive' (例如:确定，取消)
3.如果你指定了三个按钮，那么该会'neutral','negative','positive'(例如:稍后再说,'确定','取消')
(四)Alert方法
static alert(title:string,message?:string,buttons?:Buttons,type?:AlertType)
该会Alert模块显示弹框的静态方法，有四个参数，分别为标题，信息，按钮，以及按钮的风格类型
(五)Alert使用实例
上面已经讲解了Alert模块的基本介绍，现在来演示一下该模块的具体使用，实例代码如下:
* React Native Alert模块具体使用实例
* /facebook/react-native
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
ToastAndroid,
TouchableHighlight,
} from 'react-native';
class CustomButton ponent {
render() {
&TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}&
&Text style={styles.buttonText}&{this.props.text}&/Text&
&/TouchableHighlight&
class AlertDemo extends Component {
render() {
&Text style={{height:30,color:'black',margin:8}}&
弹出框实例
&CustomButton text='点击弹出默认Alert'
onPress={()=&Alert.alert('温馨提醒','确定退出吗?')}
&CustomButton text='点击弹出两个按钮的Alert'
onPress={()=&Alert.alert('温馨提醒','确定退出吗?',[
{text:'取消',onPress:()=&ToastAndroid.show('你点击了取消~',ToastAndroid.SHORT)},
{text:'确定',onPress:()=&ToastAndroid.show('你点击了确定~',ToastAndroid.SHORT)}
&CustomButton text='点击弹出三个按钮的Alert'
onPress={()=&Alert.alert('温馨提醒','确定退出吗?',[
{text:'One',onPress:()=&ToastAndroid.show('你点击了One~',ToastAndroid.SHORT)},
{text:'Two',onPress:()=&ToastAndroid.show('你点击了Two~',ToastAndroid.SHORT)},
{text:'Three',onPress:()=&ToastAndroid.show('你点击了Three~',ToastAndroid.SHORT)}
const styles = StyleSheet.create({
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
AppRegistry.registerComponent('AlertDemo', () =& AlertDemo);
运行截图如下:
(六)最后总结
今天我们主要讲解学习了Alert弹出框模块。大家有问题可以加一下群React Native技术交流2群().或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
在线用户: 1今日访问: 2,752昨日访问: 6,287累计访问: 6,073,865登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 九月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React-Native痛点解析之开发环境搭建及扩展
React-Native痛点解析之开发环境搭建及扩展
0&他的粉丝
0&他的粉丝
日. 估计阅读时间:
硅谷人工智能、机器学习、互联网金融、未来移动技术架构 ，
Author Contacted
语言 & 开发
23 他的粉丝
架构 & 设计
158 他的粉丝
56 他的粉丝
1 他的粉丝
0 他的粉丝
193 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。react-native navigation 使用教程
什么是react-navigation?
react-native从开源至今，一直存在几个无法解决的毛病，偶尔就会复发让人隐隐作痛，提醒你用的不是原生，其中包括列表的复用问题，导航跳转不流畅的问题等等。
终于facebook坐不住了，在前一段时间开始推荐使用react-navigation，并且在0.44发布的时将之前一直存在的Navigator废弃了。
react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。虽然现在功能还不完善，但基本是可以在项目中推荐使用的。
react-navigation 分为三个部分。
StackNavigator类似顶部导航条，用来跳转页面和传递参数。
TabNavigator类似底部标签栏，用来区分模块。
DrawerNavigator抽屉，类似从App左侧滑出一个页面
StackNavigator 基础用法/属性介绍
const MyApp = StackNavigator({
// 对应界面名称
screen: MyTab,
screen: Detail,
navigationOptions:{
headerTitle:'详情',
headerBackTitle:null,
headerMode: 'screen',
screen：对应界面名称，需要填入import之后的页面。
navigationOptions：配置StackNavigator的一些属性。
title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。
header：可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。
headerTitle：设置导航栏标题，推荐用这个方法。
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）
headerRight：设置导航条右侧。可以是按钮或者其他。
headerLeft：设置导航条左侧。可以是按钮或者其他。
headerStyle：设置导航条的样式。背景色，款高等。
headerTitleStyle：设置导航条文字样式。
headerBackTitleStyle：设置导航条返回文字样式。
headerTintColor：设置导航条颜色。总感觉和上面重叠了。
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
导航视觉效果
mode：定义跳转风格。
card：使用iOS和安卓默认的风格。
modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：边缘滑动返回上级页面时动画效果。
float：iOS默认的效果，可以看到一个明显的过渡动画。
screen：滑动过程中，整个页面都会返回。
none：没有动画。
cardStyle：自定义设置跳转效果。
transitionConfig： 自定义设置滑动返回的配置。
onTransitionStart：当转换动画即将开始时被调用的功能。
onTransitionEnd：当转换动画完成，将被调用的功能。
path：路由中设置的路径的覆盖映射配置。
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件。
initialRouteParams：初始路由的参数。
path:path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径
例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。
TabNavigator 基础用法/属性介绍
const MyTab = TabNavigator({
screen: Shiqidu,
navigationOptions:{
tabBarLabel: '十七度',
tabBarIcon: ({tintColor}) => (
tabBarPosition: 'bottom',
swipeEnabled:false,
animationEnabled:false,
tabBarOptions: {
activeBackgroundColor:'white',
activeTintColor:'#4ECBFC',
inactiveBackgroundColor:'white',
inactiveTintColor:'#aaa',
showLabel:false,
屏幕导航配置
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
navigationOptions：配置TabNavigator的一些属性
title：标题，会同时设置导航条和标签栏的title，还是不推荐这种方式。
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置。
tabBarLabel：设置标签栏的title。推荐这个方式。
标签栏配置
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动。
animationEnabled：是否在更改标签时显示动画。
lazy：是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
initialRouteName： 设置默认的页面组件
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions：配置标签栏的一些属性
activeTintColor：label和icon的前景色 活跃状态下（选中）。
activeBackgroundColor：label和icon的背景色 活跃状态下（选中） 。
inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。
inactiveBackgroundColor：label和icon的背景色 不活跃状态下（未选中）。
showLabel：是否显示label，默认开启。
style：tabbar的样式。
labelStyle：label的样式。
activeTintColor：label和icon的前景色 活跃状态下（选中） 。
inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。
showIcon：是否显示图标，默认关闭。
showLabel：是否显示label，默认开启。
style：tabbar的样式。
labelStyle：label的样式。
upperCaseLabel：是否使标签大写，默认为true。
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）。
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）。
scrollEnabled：是否启用可滚动选项卡。
tabStyle：tab的样式。
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
labelStyle：label的样式。
iconStyle：图标的样式。
安卓上的tabbar文字会下移, 是因为安卓比iOS多了一个属性,就是iconStyle,通过设置labelStyle和iconStyle两个样式,外加style的高度,来使效果更佳合理.
navigate('Detail',{
title:'图片详情',
url:item.url,
Detail：在StackNavigator中注册的页面，需要一一对应，才能跳转到相应的页面
title：在跳转的页面可以通过this.props.navigation.state.params.title获取到这个参数。当然这个参数可以随便填写，都可以通过this.props.navigation.state.params.xxx获取。
navigate('Detail',{
// 跳转的时候携带一个参数去下个页面
callback: (data)=>{
console.log(data); // 打印值为：'回调参数'
const {navigate,goBack,state} = this.props.
// 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
项目中基本是没可能用自带的那个导航条的，自带导航条左侧的按钮永远是蓝色的，如果我们需要更改按钮颜色，就需要用到自定义的功能了。
const StackOptions = ({navigation}) => {
console.log(navigation);
let {state,goBack} =
// 用来判断是否隐藏或显示header
const visible= state.params.isV
if (visible === true){
const headerStyle = {backgroundColor:'#4ECBFC'};
const headerTitle = state.params.
const headerTitleStyle = {fontSize:FONT_SIZE(20),color:'white',fontWeight:'500'}
const headerBackTitle =
const headerLeft = (
isCustom={true}
customView={
onPress={()=>{goBack()}}
return {headerStyle,headerTitle,headerTitleStyle,headerBackTitle,headerLeft,header}
然后通过下面的方法调用就可以自定制导航了。
const MyApp = StackNavigator({
screen: MyTab,
screen: Detail,
navigationOptions: ({navigation}) => StackOptions({navigation})
在页面中使用的时候，在跳转页面的时候需要传递title参数，才能看到效果哦。
自定义tabbar
tabbar的图标可不可以使用原图，选中状态下可不可以设置其他图标。研究了一下官方文档，发现tabBarIcon除了tintColor还有另一个属性，用来判断选中状态的focused。
tabBarIcon: ({tintColor,focused}) => (
通过判断focused，选中状态下使用十七度图标，未选中状态使用干货图标。
如果想使用图标原来的样子，那就将style的tintColor去掉，这样就会显示图标原本的颜色。
export const TabOptions = (tabBarTitle,normalImage,selectedImage,navTitle) => {
// console.log(navigation);
const tabBarLabel = tabBarT
console.log(navTitle);
const tabBarIcon = (({tintColor,focused})=> {
const headerTitle = navT
const headerTitleStyle = {fontSize:FONT_SIZE(20),color:'white'};
// header的style
const headerStyle = {backgroundColor:'#4ECBFC'};
return {tabBarLabel,tabBarIcon,headerTitle,headerTitleStyle,headerStyle};
在static中使用this方法
我之前文章中是将navaigationOptions的方法写在了app.js中，没有在页面中通过static navaigationOptions来初始化页面，这段时间刚好有人问，所以在这里就写一下该怎么弄。
首先需要在componentDidMount(){}中动态的添加点击事件
属性给params
componentDidMount(){
this.props.navigation.setParams({
title:'自定义Header',
navigatePress:this.navigatePress
navigatePress = () => {
alert('点击headerRight');
console.log(this.props.navigation);
接下来就可以通过params方法来获取点击事件了
static navigationOptions = ({ navigation, screenProps }) => ({
title: navigation.state.params.title,
headerRight:(
让安卓实现push动画
怎么让安卓实现类似iOS的push动画，后来翻看官方issues的时候，真的发现了实现push动画的代码，在这里共享下
// 先引入这个方法
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
// 在StackNavigator配置headerMode的地方，使用transitionConfig添加
headerMode: 'screen',
transitionConfig:()=>({
screenInterpolator:CardStackStyleInterpolator.forHorizontal,
原文链接：
啥都没有，何不创作一个？
官方采集助手
发送验证邮件