首页 > 解决方案 > 屏幕和标题在反应导航中闪烁

问题描述

我正在使用 react-navigation 来导航屏幕。在这里,我使用了 TabBarBotoom 和堆栈导航器。

headerRight(标题右侧有 3 个图标)位于 stacknavigator 内,因此在导航时它会闪烁。对此的任何解决方案。在标题那里?

版本:

“反应导航”:“^3.2.3”

“反应”:“16.8.1”,

反应原生 cli:2.0.1

反应原生:0.58.4

renderMyHomeHeader = (navigation) => {
  let navigationOptions = {
    headerStyle: {
      backgroundColor: 'black',
      borderWidth: 0,
      borderBottomWidth: 0,
      width: deviceWidth,
      height:  headerHeight
    },
    headerLeft: headerTitleNavigationOptions('Home'),
    //headerLeft: headerLeftNavigatorOptions(navigation),
    headerRight: headerRightNavigatorOptions(navigation) // Here I have many screens
  };

  navigationOptions: ({ navigation }) => ({
  headerStyle: {
      backgroundColor: 'black',
      borderWidth:0,
      borderBottomWidth:0
  },
})

  if (navigation.state.routeName != 'Home') {
    navigationOptions = {
      header: null
    };
  }
  return navigationOptions;
}

const BottomTabNavigator = createBottomTabNavigator({
  Home: {
    screen: createStackNavigator({
     HomeScreen: {
        screen: HomeScreen
      },
      User: {
        screen: User
      },
    },
    {
      defaultNavigationOptions: ({ navigation }) => (
        renderMyHomeHeader(navigation)
      ),
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: showTabBar(navigation),
        tabBarIcon: ({focused}) =>  (<Image style={{tintColor: focused ? '#C7A985': '#FFFFFF', width: 45, borderColor:'white', height:45, paddingTop:0, resizeMode:'contain'}} source={{uri: 'image'}} />),
        //tabBarIconColor: 'white',
        tabBarOnPress: ({}) => (navigation.navigate('Home')),
        inactiveTintColor:'white'
      }),
      transitionConfig: () => ({
          transitionSpec: {
            duration: 0,
            timing: Animated.timing,
            opacity: 0
          },
        }),
      },
    ),
  },

标签: react-nativereact-navigationstack-navigatorreact-native-tabnavigator

解决方案


推荐阅读