Modal 是一个常用的组件，此文仅是自己学习的理解，如果有错误或理解偏差欢迎指正，我的邮箱是[email protected]
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(onClose()}
>
this.dismiss()}
>
{menus.map((result,i,arr)=>{
let menu = arr[i];
return {
onSelect(arr[i])
}}
onderlayColor={'transparent'}
>
{menu.name}
{
i!==menus.length-1?:null
}
})}
)
}
}
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: []
}