Modal 组件居中显示,丰富功能

[WangShayne]

参考Ant Design Mobile RN

[SunLxy]

Modal的placement添加了middle值，用以控制居中展示，请安装 @uiw/[email protected] 试一下效果 @WangShayne

import React, { useState, Fragment } from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Modal, Button,Grid, Icon } from '@uiw/react-native';

function ButtonGroupView() {
  const [visible,setVisible]= useState(false)
  const data = Array.from(new Array(24)).map((_val, i) => {
    return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
  });
  return (
    <Fragment>
      <Modal visible={visible} placement='middle'>
        <SafeAreaView style={{width:600}}>
          <View>
            <Grid data={data} columns='6' hasLine={false}/>
            <Button onPress={() => setVisible(false)}>
              隐藏中间弹出的模态框
            </Button>
          </View>
        </SafeAreaView>
      </Modal>
       <Button onPress={() => setVisible(true)}>
        中间显示
      </Button>
    </Fragment>
  );
}
export default ButtonGroupView