Version: 6.x

打开模式

模式显示暂时阻止与主视图交互的内容。

¥A modal displays content that temporarily blocks interactions with the main view.

模态窗口就像弹出窗口 - 它通常具有不同的过渡动画，旨在专注于一个特定的交互或内容。

¥A modal is like a popup — it usually has a different transition animation, and is intended to focus on one particular interaction or piece of content.

¥Creating a stack with modal screens

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 上将其关闭。

¥Here, we are creating 2 groups of screens using the RootStack.Group component. The first group is for our regular screens, and the second group is for our modal screens. For the modal group, we have specified presentation: 'modal' in screenOptions. This will apply this option to all the screens inside the group. This option will change the animation for the screens to animate from bottom-to-top rather than right to left. The presentation option for stack navigator can be either card (default) or modal. The modal behavior slides the screen in from the bottom and allows the user to swipe down from the top to dismiss it on iOS.

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

¥Instead of specifying this option for a group, it's also possible to specify it for a single screen using the options prop on RootStack.Screen.

概括

¥Summary

要更改堆栈导航器上的转换类型，你可以使用 presentation 选项。

¥To change the type of transition on a stack navigator you can use the presentation option.
当 presentation 设置为 modal 时，屏幕的行为类似于模态，即它们具有从下到上的过渡，并且可能在后台显示前一个屏幕的一部分。

¥When presentation is set to modal, the screens behave like a modal, i.e. they have a bottom to top transition and may show part of the previous screen in the background.
在组上设置 presentation: 'modal' 会使该组中的所有屏幕都成为模态，因此要在其他屏幕上使用非模态转换，我们添加另一个具有默认配置的组。

¥Setting presentation: 'modal' on a group makes all the screens in the group modals, so to use non-modal transitions on other screens, we add another group with the default configuration.

最佳实践

¥Best practices

由于模态框旨在位于其他内容之上，因此在使用模态框时需要记住以下几点：

¥Since modals are intended to be on top of other content, there are a couple of things to keep in mind when using modals:

避免将它们嵌套在其他导航器（例如选项卡或抽屉）中。模态屏幕应定义为根堆栈的一部分。

¥Avoid nesting them inside other navigators like tab or drawer. Modal screens should be defined as part of the root stack.
模态屏幕应该是堆栈中的最后一个 - 避免将常规屏幕推到模式之上。

¥Modal screens should be the last in the stack - avoid pushing regular screens on top of modals.
即使配置为模式，堆栈中的第一个屏幕也会显示为常规屏幕，因为它前面没有屏幕可以显示在后面。因此，请务必确保将模态屏幕推送到常规屏幕或另一个模态屏幕的顶部。

¥The first screen in a stack appears as a regular screen even if configured as a modal, since there is no screen before it to show behind. So always make sure that modal screens are pushed on top of a regular screen or another modal screen.

使用模态屏幕创建堆栈​

概括​

最佳实践​

使用模态屏幕创建堆栈

概括

最佳实践