反应导航选项卡导航器中的交叉淡入淡出动画

Question

我正在使用反应导航选项卡导航器并反应原生材料底部导航，它当前从屏幕滑动到屏幕。 如材料设计指南所示，我如何让它从一个屏幕淡入淡出另一个屏幕。

Router.js

 import React from 'react'; import { TabNavigator, StackNavigator, NavigationActions } from 'react-navigation'; import { NavigationComponent } from 'react-native-material-bottom-navigation'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { MAIN_COLOR, BOTTOM_BAR_COLOR, BOTTOM_BAR_ICON_COLOR } from '../config'; import { Classes, Settings, Search, SplashScreen } from '../components/screens'; import Login from '../components/screens/Login'; import Main from '../Main'; export const Tabs = TabNavigator({ Classes: { screen: Classes, navigationOptions: { tabBarLabel: 'Classes', tabBarIcon: () => <Icon size={24} name="list" color={BOTTOM_BAR_ICON_COLOR} />, }, }, Search: { screen: Search, navigationOptions: { tabBarLabel: 'Search', tabBarIcon: () => <Icon size={24} name="search" color={BOTTOM_BAR_ICON_COLOR} />, }, }, Settings: { screen: Settings, navigationOptions: { tabBarLabel: 'Settings', tabBarIcon: () => <Icon size={24} name="settings" color={BOTTOM_BAR_ICON_COLOR} />, }, }, }, { tabBarComponent: NavigationComponent, tabBarPosition: 'bottom', swipeEnabled: false, tabBarOptions: { bottomNavigationOptions: { labelColor: BOTTOM_BAR_ICON_COLOR, rippleColor: MAIN_COLOR, shifting: false, tabs: { Search: { barBackgroundColor: BOTTOM_BAR_COLOR, activeIcon: <Icon size={24} name="search" color={MAIN_COLOR} />, activeLabelColor: MAIN_COLOR, }, Classes: { barBackgroundColor: BOTTOM_BAR_COLOR, activeIcon: <Icon size={24} name="list" color={MAIN_COLOR} />, activeLabelColor: MAIN_COLOR, }, Settings: { barBackgroundColor: BOTTOM_BAR_COLOR, activeIcon: <Icon size={24} name="settings" color={MAIN_COLOR} />, activeLabelColor: MAIN_COLOR, }, }, }, }, }); 

这就是我想要的效果

https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HTTA0QUM4MWxKSTg/components_bottomnavigation_behavior_crossfade.webm

这就是我所拥有的

https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HQWYxQWE5LUg2WDQ/components_bottomnavigation_behavior_sibling.webm

Answer 1

我最终通过禁用选项卡导航器中的动画来修复错误。