【React Native】模态页Modal

模态页Modal

app/_layout.js

export default function Layout() {
  return (
    <Stack
      //...
    >
      //...

       {/* Modal */}
       <Stack.Screen
        name="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.Screen
  name="modal"
  options={{
    presentation: 'modal',
    animation: 'slide_from_bottom', // 从底部滑入
    // ...
  }}
/>