React Native之Modal组件实现遮罩层效果

水深无声 2022-04-24 01:58 572阅读 0赞

###### React-Native中Modal的使用 ######

/** 
        * React Native App 
        * dongtao 2017/04/22 
        * @flow 
        */ 
        
        import React, { Component } from 'react'; 
        import { 
        AppRegistry, 
        StyleSheet, 
        Text, 
        Modal, 
        PixelRatio, 
        View 
        } from 'react-native'; 
        
        
        class ModalDemo extends Component { 
        
        constructor(props) { 
        super(props);//这一句不能省略，照抄即可 
        this.state = { 
        animationType: 'none',//none slide fade 
        modalVisible: false,//模态场景是否可见 
        transparent: true,//是否透明显示 
        }; 
        } 
        
        render() { 
        let modalBackgroundStyle = { 
        backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : 'red', 
        }; 
        let innerContainerTransparentStyle = this.state.transparent 
        ? { backgroundColor: '#fff', padding: 20 } 
        : null; 
        
        return ( 
        
        <View style={ { alignItems: 'center', flex: 1 }}> 
        <Modal 
        animationType={this.state.animationType} 
        transparent={this.state.transparent} 
        visible={this.state.modalVisible} 
        onRequestClose={() => { this._setModalVisible(false) } } 
        onShow={this.startShow} 
        > 
        <View style={[styles.container, modalBackgroundStyle]}> 
        <View style={[styles.innerContainer, innerContainerTransparentStyle]}> 
        <Text style={styles.date}>2016-08-11</Text> 
        <View style={styles.row}> 
        <View > 
        <Text style={styles.station}>长沙站</Text> 
        <Text style={styles.mp10}>8: 00出发</Text> 
        </View> 
        <View> 
        <View style={styles.at}></View> 
        <Text style={[styles.mp10, { textAlign: 'center' }]}>G888</Text> 
        </View> 
        <View > 
        <Text style={[styles.station, { textAlign: 'right' }]}>北京站</Text> 
        <Text style={[styles.mp10, { textAlign: 'right' }]}>18: 00抵达</Text> 
        </View> 
        </View> 
        <View style={styles.mp10}> 
        <Text>票价：￥600.00元</Text> 
        <Text>乘车人：东方耀</Text> 
        <Text>长沙站 火车南站 网售</Text> 
        </View> 
        <View style={[styles.mp10, styles.btn, { alignItems: 'center' }]}> 
        <Text style={styles.btn_text}>去支付</Text> 
        </View> 
        <Text 
        onPress={this._setModalVisible.bind(this,false) } 
        style={ {fontSize:20,marginTop:10}}> 
        关闭 
        </Text> 
        </View> 
        </View> 
        </Modal> 
        
        <Text style={ { fontSize: 30,color:'red' }} onPress={this._setModalVisible.bind(this, true) }>预定火车票</Text> 
        
        
        </View> 
        ); 
        } 
        
        
        _setModalVisible = (visible) => { 
        this.setState({ modalVisible: visible }); 
        } 
        
        startShow=()=>{ 
        alert('开始显示了'); 
        } 
        
        
        
        
        } 
        
        const styles = StyleSheet.create({ 
        container: { 
        flex: 1, 
        justifyContent: 'center', 
        padding: 40, 
        }, 
        innerContainer: { 
        borderRadius: 10, 
        alignItems: 'center', 
        }, 
        row: { 
        alignItems: 'center', 
        
        flex: 1, 
        flexDirection: 'row', 
        marginBottom: 20, 
        }, 
        rowTitle: { 
        flex: 1, 
        fontWeight: 'bold', 
        }, 
        button: { 
        borderRadius: 5, 
        flex: 1, 
        height: 44, 
        alignSelf: 'stretch', 
        justifyContent: 'center', 
        overflow: 'hidden', 
        }, 
        buttonText: { 
        fontSize: 18, 
        margin: 5, 
        textAlign: 'center', 
        }, 
        
        page: { 
        flex: 1, 
        position: 'absolute', 
        bottom: 0, 
        left: 0, 
        right: 0, 
        top: 0, 
        }, 
        zhifu: { 
        height: 150, 
        }, 
        
        flex: { 
        flex: 1, 
        }, 
        at: { 
        borderWidth: 1 / PixelRatio.get(), 
        width: 80, 
        marginLeft:10, 
        marginRight:10, 
        borderColor: '#18B7FF', 
        height: 1, 
        marginTop: 10 
        
        }, 
        date: { 
        textAlign: 'center', 
        marginBottom: 5 
        }, 
        station: { 
        fontSize: 20 
        }, 
        mp10: { 
        marginTop: 5, 
        }, 
        btn: { 
        width: 60, 
        height: 30, 
        borderRadius: 3, 
        backgroundColor: '#FFBA27', 
        padding: 5, 
        }, 
        btn_text: { 
        lineHeight: 18, 
        textAlign: 'center', 
        color: '#fff', 
        }, 
        }); 
        
        AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

![1240][]

1.png

[1240]: /images/20220221/35540206a2dd463782f875f5afd89def.png