如何避免在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" 
     /> 
    ) 
}) 
});