【React Native】模态页Modal

模态页Modal

app/_layout.js

export default function Layout() {return (<Stack//...>//...{/* Modal */}<Stack.Screenname="teachers/[id]"options={{presentation: 'modal',animation: 'slide_from_bottom', // 从底部滑入title: '老师详情',headerLeft: () => <CloseButton />,}}/>//...</Stack>);
}

然后正常跳转就可以实现模态的效果了：

export default function Index() {return (<View style={styles.container}>//...<Link style={styles.link} href="/teachers/1">打开教师页（Modal）</Link></View>);
}

默认跳转后没有关闭按钮，我们可以自定义一个：

import { Link, Stack } from 'expo-router'
import { MaterialCommunityIcons } from '@expo/vector-icons'
import { TouchableOpacity, View } from 'react-native'// 模态页关闭按钮
function CloseButton() {return (<View style={{ width: 30 }}><Link href="../" asChild><TouchableOpacity><MaterialCommunityIcons name="close" size={30} color="#1f99b0" /></TouchableOpacity></Link></View>)
}

还有一种模态，也是从下向上弹出，但是是全屏的。可以将模态这里改为fullScreenModal：

presentation: 'fullScreenModal', // 全屏模态

现在弹出的模态就是全屏的了。

但是要注意一点，安卓的某些机型会有兼容性问题，导致模态框不会从底部弹出，而是像其他card一样从侧面弹出。这种情况我们也只能尽可能添加额外才做使其类似与 IOS 的模态框。

<Stack.Screenname="modal"options={{presentation: 'modal',animation: 'slide_from_bottom', // 从底部滑入// ...}}
/>