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: []
}