Modal 是一个常用的组件，此文仅是自己学习的理解，如果有错误或理解偏差欢迎指正，我的邮箱是847193449@qq.com

Modal

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

属性

• animationType（动画类型） PropTypes.oneOf(['none', 'slide', 'fade'])
  none：没有动画
  slide：从底部滑入
  fade：淡入视野

• onRequestClose（被销毁时会调用此函数）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func

如果你的代码要在Android上运行，必须实现onRequestClose回调方法来说明在点击back键后 Modal的行为。

• onShow（模态显示的时候被调用）function

• transparent (透明度) bool
  true时，使用透明背景渲染模态。

• visible（可见性） bool

  决定模态是否可见

• onOrientationChange（方向改变时调用）PropTypes.func

  在模态方向变化时调用，提供的方向只是 '' 或 ''。在初始化渲染的时候也会调用，但是不考虑当前方向。

• supportedOrientations（允许模态旋转到任何指定取向）

PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape'，'landscape-left'，'landscape-right']））

---

以上是Modal的基本使用，下面来介绍一下一个基于Modal的全屏弹框封装
此封装组件实现如下：

API	描述
show	打开弹框
dismiss	关闭弹窗

Props	描述
menus:PropTypes.array.isRequired	弹框内容
onSelect:PropTypes.func.isRequired	item选中回调
theme:PropTypes.object	支持定义主题

以下为代码展示

import PropTypes from 'prop-types';
import {Modal,TouchableOpacity,StyleSheet,Image,View,Text,DeviceInfo} from 'react-native';
export default class MenuDialog extends Component {
    state = {
        visible:false
    }
    show(){
        this.setState({
            visible:true
        })
    }
    dismiss(){
        this.setState({
            visible:false
        })
    }
    render(){
        const{onClose,menus,onSelect,theme}=this.props;
        return(<Modal
            transparent={true}
            visible={this.state.visible}
            onRequestClose={()=>onClose()}
        >
        <TouchableOpacity
        style={styles.container}
            onPress={()=>this.dismiss()}
        >
        <Image
            source={require('../../res/images/arrow_top.png')}
            style={styles.arrow} 
        />
        <View style={styles.content}>
            {menus.map((result,i,arr)=>{
                let menu = arr[i];
                return <TouchableOpacity
                    key={i}
                    onPress={()=>{
                        onSelect(arr[i])
                    }}
                    onderlayColor={'transparent'}
                >
                    <View style={{alignItems:'center',flexDirection:'row'}}>
                        <Image source={menu.icon}
                               resizeMode={'stretch'}
                               style={[styles.icon,theme.styles.tabBarSelectedIcon]}
                        />
                        <Text style={styles.text}>{menu.name}</Text>
                        {
                            i!==menus.length-1?<View style={{height:0.3,backgroundColor:'darkgray'}}/>:null
                        }
                    </View>
                </TouchableOpacity>
            })}
        </View>
        </TouchableOpacity>
        </Modal>)
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'rgba(0,0,0,0.6)',
        alignItems:'flex-end'
    },
    arrow:{
        //适配iPhoneX
        marginTop:50+(DeviceInfo.isIphoneX_deprecated?24:0),
        width:16,
        height:6,
        marginRight:18,
        resizeMode:'contain'
    },
    content:{
        backgroundColor:'white',
        borderRadius:3,
        paddingTop:3,
        paddingBottom:3,
        marginRight:3
    },
    text:{
        fontSize:16,
        color:'black',
        fontWeight:'400',
        paddingRight:15
    },
    icon:{
        width:16,
        height:16,
        margin:10,
        marginLeft:15
    }
})
//属性约束
MenuDialog,propTypes={
    menus:PropTypes.array.isRequired,   
    onSelect:PropTypes.func.isRequired, 
    theme:PropTypes.object,
    onClose:PropTypes.func.isRequired,
}
//默认属性
MenuDialog.defaultProps = {
    menus: []
}