我正在使用 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
},
}),
},
),
},