版本：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 组屏幕。第一组用于我们的常规屏幕，第二组用于我们的模态屏幕。对于模态组，我们在 screenOptions 中指定了 presentation: 'modal'。这将把此选项应用于组内的所有屏幕。此选项将更改屏幕的动画，使其从底部到顶部动画，而不是从右到左。堆栈导航器的 presentation 选项可以是 card（默认）或 modal。modal 行为从底部滑入屏幕，并允许用户在 iOS 上从顶部向下滑动以将其关闭。

除了为整个组指定此选项外，还可以使用 `RootStack.Screen` 上的 `options` 属性为单个屏幕指定此选项。

摘要

要更改堆栈导航器的过渡类型，可以使用 `presentation` 选项。
当 `presentation` 设置为 `modal` 时，屏幕的行为就像模态一样，即它们具有从下到上的过渡，并且可能在背景中显示部分先前屏幕。
在组上设置 `presentation: 'modal'` 会使组中的所有屏幕都成为模态，因此要在其他屏幕上使用非模态过渡，我们添加另一个具有默认配置的组。

最佳实践

由于模态旨在位于其他内容之上，因此在使用模态时需要注意一些事项。

避免将它们嵌套在其他导航器（如选项卡或抽屉）中。模态屏幕应定义为根堆栈的一部分。
模态屏幕应位于堆栈的最后 - 避免将常规屏幕推到模态之上。
堆栈中的第一个屏幕即使配置为模态，也会显示为常规屏幕，因为前面没有屏幕显示在它后面。因此，请始终确保模态屏幕被推到常规屏幕或另一个模态屏幕之上。

使用模态屏幕创建堆栈​

摘要​

最佳实践​

使用模态屏幕创建堆栈

摘要

最佳实践