导航时反应导航故障

时间:2019-07-08 21:12:10

标签: react-native react-navigation

我在具有底部标签导航器(来自react-navigation)的视图中使用react-navigation-animated-switch,这是我的代码:

import { createBottomTabNavigator } from 'react-navigation';
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';

const TimelineStack = createAnimatedSwitchNavigator({
  Timeline: {
    screen: Timeline,
    navigationOptions: {
      header: null,
    }
  },
  NewView: {
    screen: NewView,
    navigationOptions: {
      header: null,
    }
  }
},
{
  transition: (
    <Transition.Together>
      <Transition.Out
        type="fade"
        durationMs={400}
        interpolation="easeIn"
      />
      <Transition.In type="fade" durationMs={500} />
    </Transition.Together>
  ),
  initialRouteName: 'Timeline'
}
);

TimelineStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

const LoggedInNavigator = createBottomTabNavigator({
  Timeline: TimelineStack,
  A: A,
  B: B,
  C: C,
  D: D,
}, {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName = 'ellipsis-h';

        return <FontAwesome5
          name={iconName}
          style={
            { color: focused ? commonStyles.mainColor : commonStyles.inactiveBottomBarColor, fontSize: 20 }
          } />;
      },
    }),
    tabBarOptions: {
      activeTintColor: commonStyles.mainColor,
      inactiveTintColor: commonStyles.inactiveBottomBarColor,
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: commonStyles.mainBGColor,
      },
    }
  });

然后,当我按下按钮时,我会这样做:

onPress={() => this.props.navigation.navigate('NewView')}>

和底部标签栏出现故障并闪烁白色一秒钟,然后返回主要背景颜色,我制作了一段视频以更好地理解

Video

有人可以告诉我如何解决该故障吗?

谢谢

0 个答案:

没有答案