反應導航選項卡導航器中的交叉淡入淡出動畫

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

我最終通過禁用選項卡導航器中的動畫來修復錯誤。