如何避免在TabNavigator及其子屏幕中覆盖标题的“标题”？ （反应导航）

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"
      />
    )
 })
});