javascript - react 导航选项卡导航器中的淡入淡出动画

我正在使用 react 导航选项卡导航器和 react native Material 底部导航，当前它在屏幕之间滑动。像《 Material 设计指南》所建议的那样，我如何使它从一个屏幕到另一个屏幕交叉淡入淡出。

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

最佳答案

我终于通过在标签导航器中禁用动画来修复了该错误。

关于javascript - react 导航选项卡导航器中的淡入淡出动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45584695/