美文网首页react-native
React Native Modal 自定义Dialog

React Native Modal 自定义Dialog

作者: 小熊_c37d | 来源:发表于2018-05-09 16:02 被阅读228次

    React Native Modal 自定义Dialog

    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' 平台,必需使用此函数

    • onShow(模态显示的时候被调用)function

    • transparent (透明度) bool

    • true时,使用透明背景渲染模态。

    • visible(可见性) bool

    • 决定模态是否可见

    • onOrientationChange(方向改变时调用)PropTypes.func

      • 在模态方向变化时调用,提供的方向只是 '' 或 ''。在初始化渲染的时候也会调用,但是不考虑当前方向。
    • supportedOrientations(允许模态旋转到任何指定取向)

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

    Demo演示

    
    import React, {Component} from 'react';
    import {Modal,View,Text} from 'react-native';
    
    
    export default class DialogDemo extends Component {
    
        constructor(props) {
            super(props);//这一句不能省略,照抄即可
            this.state = {
                animationType: 'fade',//none slide fade
                modalVisible: false,//模态场景是否可见
                transparent: true,//是否透明显示
            };
        }
        render() {
    
            return <Modal
                animationType={this.state.animationType}
                transparent={this.state.transparent}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this._setModalVisible(false)
                }}
                onShow={this.startShow}
            >
                <View style={{justifyContent :'center', flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)' }}>
    
                    <View style={{ marginLeft:50,marginRight:50,alignItems:'center', backgroundColor:'white',borderRadius:5}}>
                    <Text>哗啦啦</Text>
                    <Text>哗啦啦</Text>
                    <Text>哗啦啦</Text>
                    <Text>哗啦啦</Text>
                    <Text>哗啦啦</Text>
                    <Text>哗啦啦</Text>
                    </View>
                </View>
            </Modal>
        }
    
        _setModalVisible = (visible) => {
            this.setState({modalVisible: visible});
        }
        startShow = () => {
         //   alert('开始显示了');
        }
    
    
    }
    
    

    调用

     return <View style={{flex: 1,}}>
                  <DialogDemo
                    ref="dialog"
                    />
                   <Button
                        onPress={() => {
                            this.refs.dialog._setModalVisible(true);
    
                        }
                        }
                        title="点击现实dialog"
                    />
                </View>
    
    
    
    
    图片.png

    相关文章

      网友评论

        本文标题:React Native Modal 自定义Dialog

        本文链接:https://www.haomeiwen.com/subject/wgxorftx.html