【React Native】模态页Modal

模态页Modal

app/_layout.js

export default function Layout() {
  return (
    
      //...

       {/* Modal */}
        ,
        }}
      />

      //...
    
  );
}

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

export default function Index() {
  return (
    
      //...

      
        打开教师页（Modal）
      
    
  );
}

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

import { Link, Stack } from 'expo-router'
import { MaterialCommunityIcons } from '@expo/vector-icons'
import { TouchableOpacity, View } from 'react-native'

// 模态页关闭按钮
function CloseButton() {
  return (
    
      
        
          
        
      
    
  )
}

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

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

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

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