TabNavigatorとその子画面でヘッダーの 'title'をオーバーライドすることを避けるにはどうすればよいですか？ （反応ナビゲーション）

Question

TabNavigatorのタイトルを「Stylebook」としてボタンで設定したいと思います。

ただし、TabNavigatorの子である画面は「タイトル」を変更します。私はそれが「タイトル」小道具を無効にしていると思う。どうすればそれを避けることができますか？

これはStylebookAllScreenはStylebookCategoryScreenとほとんど同じであるTabNavigatorコンテナ（私のTabBarにはStackNavigatorである）

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

です。

これを解決できる場合は、ナビゲータの全体構造も変更できます。

ありがとうございます！

Answer 1

StylebookAllScreenコンポーネントをStackNavigatorに入れて、TabNavigatorに入れなければなりません。 StackNavigatorにそれを置くことは、あなたがComponent（などButtonとしてあなたの見出しの左/右に追加することができますprops

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

headerLeftで

またはheaderRight

ようにあなたが設定することができます

このような何かを試してみてください。：その後、

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