如何避免在 TabNavigator 及其 children 屏幕中覆盖 header 的 'title'？ (react-navigation)

Question

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

但是，TabNavigator children 的屏幕更改了 'title'。我认为它覆盖了 'title' 道具。我怎样才能避免它？

这是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，您可以在标题的 left/right 中添加 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"
      />
    )
 })
});

如何避免在 TabNavigator 及其 children 屏幕中覆盖 header 的 'title'？ (react-navigation)

How to avoid overriding 'title' of the header in TabNavigator and its children screens? (react-navigation)

react-native

react-navigation