跳到主要内容
版本：7.x

打开模态框

Modal shown on screen

模态框显示临时阻止与主视图交互的内容。

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

创建带有模态屏幕的堆栈​

function HomeScreen() {
  const navigation = useNavigation();

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

function ModalScreen() {
  const navigation = useNavigation();

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

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

const HomeStack = createStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        headerShown: false,
      },
    },
    Details: {
      screen: DetailsScreen,
      options: {
        headerShown: false,
      },
    },
  },
});

const RootStack = createStackNavigator({
  groups: {
    Home: {
      screens: {
        App: {
          screen: HomeStack,
          options: { title: 'My App' },
        },
      },
    },
    Modal: {
      screenOptions: {
        presentation: 'modal',
      },
      screens: {
        MyModal: ModalScreen,
      },
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}
在 Snack 上尝试

在这里，我们使用 RootStack.Group 组件创建了 2 组屏幕。第一组用于我们的常规屏幕，第二组用于我们的模态屏幕。对于模态组，我们在 screenOptions 中指定了 presentation: 'modal'。这将把此选项应用于组内的所有屏幕。此选项会将屏幕的动画更改为从底部到顶部动画，而不是从右到左。堆栈导航器的 presentation 选项可以是 card（默认）或 modal。modal 行为使屏幕从底部滑入，并允许用户从顶部向下滑动以在 iOS 上关闭它。

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

总结​

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

最佳实践​

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

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