【ReactNative】react-navigationでヘッダーを表示させる

BottomTabNavigatorやDrawerNavigatorを使う場合は、そのままscreenをcomponentに渡してもヘッダー部分が表示されません。

ヘッダーを表示させる場合は、StackNavigatorを間に噛ませる必要があります。Screen側でオプションをゴニョゴニョしてもできません。

1画面しかない場合はStackNavigatorは不要かとも思いますが、とりあえず使います。あとあと画面が増えたときに対応がしやすいと思います。

<Drawer.Navigator>
NG  <Drawer.Screen name="Setting" component={SettingScreen} />
OK  <Drawer.Screen name="Setting" component={SettingStackNavigator} />
</Drawer.Navigator>

// 1画面しか無くてもStackNavigatorでラップする
const SettingStack = createStackNavigator();
const SettingStackNavigator = () => {
  return (
    <SettingStack.Navigator>
      <SettingStack.Screen
        name="Setting"
        component={SettingScreen}
        options={({ navigation }) => ({
          headerLeft: () => <DrawerButton navigation={navigation} />,
        })}
      />
    </SettingStack.Navigator>
  );
};

// 表示する画面
const SettingScreen = () => {
  return (
    <View style={styles.container}>
      <Text>SettingScreen</Text>
    </View>
  );
};