了解如何在 Expo Router 中使用模态。
模态框是移动应用中的常见模式。它们是在当前屏幕之上渲染新屏幕的一种方式。它们通常用于创建新账户或用户从列表中选择选项等操作。
¥Modals are a common pattern in mobile apps. They are a way to present a new screen on top of the current screen. They are often used for things like creating a new account, or for a user to select an option from a list.
你可以通过创建将某些路由渲染为模态的根布局路由来实现模态。
¥You can implement a modal by creating a root layout route that renders certain routes as modals.
app
_layout.tsx
home.tsx
modal.tsx
布局路由 app/_layout.tsx 可以将组件渲染为模态框。添加一个名为 modal 的新路由,用于渲染模态:
¥The layout route app/_layout.tsx can present components as modals. Add a new route called modal that is used to render modals:
import { Stack } from 'expo-router';
export default function Layout() {
return (
<Stack>
<Stack.Screen
name="home"
options={{
// Hide the header for all other routes.
headerShown: false,
}}
/>
<Stack.Screen
name="modal"
options={{
// Set the presentation mode to modal for our modal route.
presentation: 'modal',
}}
/>
</Stack>
);
}
import { View, Text } from 'react-native';
import { Link } from 'expo-router';
export default function Home() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Link href="/modal">Present modal</Link>
</View>
);
}
现在创建一个模式,当模式丢失其先前的上下文并且必须作为独立页面渲染时,该模式会添加后退按钮。
¥Now create a modal that adds a back button when the modal has lost its previous context and must be presented as a standalone page.
import { View, Platform } from 'react-native';
import { Link, router } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
export default function Modal() {
// If the page was reloaded or navigated to directly, then the modal should be presented as
// a full screen page. You may need to change the UI to account for this.
const isPresented = router.canGoBack();
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{/* Use `../` as a simple way to navigate to the root. This is not analogous to "goBack". */}
{!isPresented && <Link href="../">Dismiss</Link>}
{/* Native modals have dark backgrounds on iOS. Set the status bar to light content and add a fallback for other platforms with auto. */}
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
</View>
);
}