react-本机导航showModal自定义大小

基础概念

react-native-navigation 是一个用于 React Native 应用的导航库，它提供了丰富的导航功能和组件，包括模态框（Modal）。showModal 方法用于显示一个模态框，并且可以通过传递参数来自定义模态框的大小。

类型与应用场景

全屏模态框：适用于需要覆盖整个屏幕的场景，如登录页面、设置页面等。
半屏模态框：适用于需要展示部分内容的场景，如提示信息、选择器等。

示例代码

以下是一个使用 react-native-navigation 自定义模态框大小的示例代码：

import { Navigation } from 'react-native-navigation';

// 定义模态框组件
const MyModalScreen = (props) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>This is a custom modal!</Text>
      <Button title="Close Modal" onPress={() => Navigation.dismissModal(props.componentId)} />
    </View>
  );
};

// 显示模态框
const showModal = () => {
  Navigation.showModal({
    stack: {
      children: [
        {
          component: {
            name: 'MyModalScreen',
            options: {
              modalPresentationStyle: 'formSheet', // 可以选择 'fullScreen', 'pageSheet', 'formSheet', 'overFullScreen'
              modalSize: 'half', // 自定义大小，可以是 'full' 或 'half'
              // 其他自定义样式
              style: {
                backgroundColor: 'white',
                borderRadius: 10,
                shadowColor: '#000',
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 2,
                elevation: 5,
              },
            },
          },
        },
      ],
    },
  });
};

// 在某个组件中调用 showModal 函数
const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={showModal} />
    </View>
  );
};

export default App;