画面のオプション

各画面は、特定のオプションを指定することで、それをレンダリングするナビゲーターでの表示方法に関するさまざまな側面を設定できます。たとえば、スタックナビゲーターのヘッダータイトル、ボトムタブナビゲーターのタブバーアイコンなどです。異なるナビゲーターは、異なるオプションセットをサポートしています。

基礎ドキュメントのヘッダーバーの設定セクションでは、これがどのように機能するかの基本について説明しています。また、複数のナビゲーターがある場合にどのように機能するかを理解するために、画面オプションの解決ガイドも参照してください。

画面のオプションを指定するには、3つの方法があります。

Screen の options prop

画面を設定するために、Screen コンポーネントに options という名前の prop を渡すことができます。ここでは、その画面のさまざまなオプションを含むオブジェクトを指定できます。

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Awesome app' }}
  />
  <Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{ title: 'My profile' }}
  />
</Stack.Navigator>

関数を options に渡すこともできます。関数は、その画面のnavigation propとroute propを受け取ります。これは、オプションでナビゲーションを実行したい場合に役立ちます。

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({ navigation }) => ({
    title: 'Awesome app',
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  })}
/>

Group の screenOptions prop

グループ内の画面を設定するために、Group コンポーネントに screenOptions という名前の prop を渡すことができます。ここでは、さまざまなオプションを含むオブジェクトを指定できます。screenOptions で指定されたオプションは、グループ内のすべての画面に適用されます。

例

<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

options と同様に、関数を screenOptions に渡すこともできます。関数は、各画面のnavigation propとroute propを受け取ります。これは、ルートに基づいて1つの場所ですべての画面のオプションを設定したい場合に役立ちます。

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Group
    screenOptions={({ navigation }) => ({
      presentation: 'modal',
      headerLeft: () => <CancelButton onPress={navigation.goBack} />,
    })}
  >
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

ナビゲーターの screenOptions prop

ナビゲーターコンポーネントに screenOptions という名前の prop を渡すことができます。ここでは、さまざまなオプションを含むオブジェクトを指定できます。screenOptions で指定されたオプションは、ナビゲーター内のすべての画面に適用されます。したがって、これはナビゲーター全体で設定したいオプションを指定するのに適した場所です。

例

<Stack.Navigator
  screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

options と同様に、関数を screenOptions に渡すこともできます。関数は、各画面のnavigation propとroute propを受け取ります。これは、ルートに基づいて1つの場所ですべての画面のオプションを設定したい場合に役立ちます。

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Profile: 'account',
      };

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

navigation.setOptions メソッド

navigation prop には、コンポーネント内から画面のオプションを更新できる setOptions メソッドがあります。詳細については、navigation prop のドキュメントを参照してください。

<Button
  title="Update options"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>