反応ナビゲーションタブナビゲータでクロスフェードアニメーション

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, 
 
     }, 
 
     }, 
 
    }, 
 
    }, 
 
});

これは私がこれは何I hである

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

aveの。