交互淡入淡出動畫在反應導航選項卡導航器

我正在使用反應導航選項卡導航器和反應原生材料底部導航，它目前從屏幕刷屏到屏幕。我將如何讓它從材質設計指南建議的屏幕之間淡入淡出。交互淡入淡出動畫在反應導航選項卡導航器

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

這就是I H AVE

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

來源

2017-08-09 Nithin Srinivasan