React Native Modal 自定义Dialog

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

最后编辑于：2018.05.09 16:03:05