React Native Modal 自定義Dialog

Modal

Modal組件可以用來覆蓋包含React Native根視圖的原生視圖（如UIViewController，Activity）。

在嵌入React Native的混合應(yīng)用中可以使用Modal。Modal可以使你應(yīng)用中RN編寫的那部分內(nèi)容覆蓋在原生視圖上顯示。

屬性

• animationType（動畫類型） PropTypes.oneOf(['none', 'slide', 'fade'])

  • none：沒有動畫
  • slide：從底部滑入
  • fade：淡入視野

• onRequestClose（被銷毀時會調(diào)用此函數(shù)）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func
  在 'Android' 平臺，必需使用此函數(shù)

• onShow（模態(tài)顯示的時候被調(diào)用）function

• transparent (透明度) bool

• true時，使用透明背景渲染模態(tài)。

• visible（可見性） bool

• 決定模態(tài)是否可見

• onOrientationChange（方向改變時調(diào)用）PropTypes.func

  • 在模態(tài)方向變化時調(diào)用，提供的方向只是 '' 或 ''。在初始化渲染的時候也會調(diào)用，但是不考慮當(dāng)前方向。

• supportedOrientations（允許模態(tài)旋轉(zhuǎn)到任何指定取向）

  • 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,//模態(tài)場景是否可見
            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('開始顯示了');
    }


}

調(diào)用

 return <View style={{flex: 1,}}>
              <DialogDemo
                ref="dialog"
                />
               <Button
                    onPress={() => {
                        this.refs.dialog._setModalVisible(true);

                    }
                    }
                    title="點(diǎn)擊現(xiàn)實dialog"
                />
            </View>

圖片.png