如何避免在TabNavigator及其子屏幕中覆盖标题的“标题”？ （react-navigation）

Question

我想用按钮将TabNavigator的标题设置为'Stylebook'。

但是，作为TabNavigator子项的屏幕会更改'标题'。我认为这是压倒'标题'道具。我怎样才能避免它？

这是TabNavigator的（我的TabBar处于StackNavigator）

export default TabNavigator(
{ 
    Category: { 
    screen: StylebookCategoryScreen 
    }, 
    All: { 
    screen: StylebookAllScreen 
    } 
} ,{ 
    navigationOptions: ({ navigation }) => ({ 
    title: 'Stylebook', 
    headerRight: (
     <Button onPress={() => navigation.navigate('Wardrobe')} 
     title="Wardrobe" 
     /> 
    ) 
}) 
}); 

StylebookAllScreen与StylebookCategoryScreen几乎完全相同。

class StylebookAllScreen extends Component { 
    static navigationOptions = { 
    title:'All' 
    } 

    render() { 
    return (
     <View> 
     <Text>StylebookALLScreen</Text> 
     <Text>StylebookALLScreen</Text> 
     </View> 
    ) 
    } 
} 

export default StylebookAllScreen; 

我也可以改变导航器的整体结构，如果我能解决这个问题。

谢谢！

Answer 1

您必须将StylebookAllScreen组件放入StackNavigator，然后将其放入TabNavigator。把它变成一个StackNavigator允许您设置props像

navigationOptions: ({navigation}) => ({ 
     title: "Stylebook", 
    }), 

随着headerLeft或headerRight可以添加Component（如Button到您的标题的左/右

尝试是这样的：

const StylebookStack = StackNavigator({ 
    StylebookAllScreen: { 
     screen: Map, 
     navigationOptions: ({ navigation }) => ({ 
      title: "Stylebook", 
      headerTitleStyle: { 
       .... 
      }, 
     }), 
    }, 
}); 

然后将它放入您的TabNavigator

export default TabNavigator(
{ 
    Category: { 
    screen: StylebookCategoryScreen 
    }, 
    All: { 
    screen: StylebookStack // <--- HERE 
    } 
} ,{ 
    navigationOptions: ({ navigation }) => ({ 
    title: 'Stylebook', 
    headerRight: (
     <Button onPress={() => navigation.navigate('Wardrobe')} 
     title="Wardrobe" 
     /> 
    ) 
}) 
});