バージョン: 6.x

モーダルを開く

モーダルは、メインビューとのインタラクションを一時的にブロックするコンテンツを表示します。

モーダルはポップアップのようなもので、通常は異なるトランジションアニメーションを持ち、特定のインタラクションやコンテンツに焦点を当てることを目的としています。

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const RootStack = createStackNavigator();

function RootStackScreen() {
  return (
    <RootStack.Navigator>
      <RootStack.Group>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Group>
      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
}

ここでは、RootStack.Groupコンポーネントを使用して、2つの画面グループを作成しています。最初のグループは通常の画面用で、2番目のグループはモーダル画面用です。モーダルグループでは、screenOptionsでpresentation: 'modal'を指定しています。これにより、このオプションがグループ内のすべての画面に適用されます。このオプションにより、画面のアニメーションが右から左ではなく、下から上へとアニメーションするようになります。スタックナビゲーターのpresentationオプションは、card（デフォルト）またはmodalのいずれかです。modalの動作では、画面が下からスライドインし、iOSでは上から下にスワイプして閉じることをユーザーに許可します。

グループにこのオプションを指定する代わりに、RootStack.Screenのoptionsプロパティを使用して、単一の画面に指定することもできます。

まとめ

スタックナビゲーターのトランジションのタイプを変更するには、presentationオプションを使用できます。
presentationがmodalに設定されている場合、画面はモーダルのように動作します。つまり、下から上へのトランジションを持ち、背景に前の画面の一部を表示することがあります。
グループでpresentation: 'modal'を設定すると、グループ内のすべての画面がモーダルになるため、他の画面で非モーダルトランジションを使用するには、デフォルト設定で別のグループを追加します。

ベストプラクティス

モーダルは他のコンテンツの上に表示されることを意図しているため、モーダルを使用する際にはいくつかの注意点があります。

タブやドロワーなどの他のナビゲーター内にネストすることは避けてください。モーダル画面はルートスタックの一部として定義する必要があります。
モーダル画面はスタックの最後に配置する必要があります。モーダルの上に通常の画面をプッシュすることは避けてください。
スタックの最初の画面は、モーダルとして構成されていても、背後に表示する画面がないため、通常の画面として表示されます。したがって、モーダル画面が常に通常の画面または別のモーダル画面の上にプッシュされるようにしてください。

モーダル画面を持つスタックの作成​

まとめ​

ベストプラクティス​

モーダル画面を持つスタックの作成

まとめ

ベストプラクティス