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

Question

我想用一个按钮将 TabNavigator 的标题设置为“样式书”。

但是，作为 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"
      />
    )
 })
});