React Native 弹出框

来源：互联网发布：windows更新有必要吗编辑：程序博客网时间：2024/04/27 21:49

RN为我们提供了一个跨平台通用的Modal组件，我们可以用它来实现一个弹出框的视图。
先上效果图：
这里写图片描述
代码如下：

/** * Created by gyg on 2017/5/11. * 自定义弹出框组件 */'use strict'import React, {Component} from 'react';import {    StyleSheet,    View,    Text,    TouchableHighlight,    Modal,}from 'react-native';export default class CustomModal extends Component {    render() {        return (                <Modal                    visible={this.props.visibility}                    transparent={true}                    animationType={'fade'}//none slide fade                    onRequestClose={()=>this.setState({visibility:false})}                >                    <View style={styles.container}>                        <View style={styles.modalContainer}>                            <Text style={styles.modalTitle}>{this.props.title}</Text>                            <Text style={styles.modalMessage}>{this.props.message}</Text>                            <View style={styles.horizonLine}/>                            <View style={styles.row}>                                <TouchableHighlight style={styles.leftBn} onPress={this.props.onLeftPress} underlayColor={'#C5C5C5'}>                                    <Text style={styles.leftBnText}>取消</Text>                                </TouchableHighlight>                                <View style={styles.verticalLine}/>                                <TouchableHighlight style={styles.rightBn} onPress={this.props.onRightPress}                                                    underlayColor={'#C5C5C5'} >                                    <Text style={styles.rightBnText}>确定</Text>                                </TouchableHighlight>                            </View>                        </View>                    </View>                </Modal>        )    }}const styles = StyleSheet.create({    container:{        flex:1,        backgroundColor:'rgba(0, 0, 0, 0.5)',        justifyContent:'center',        alignItems:'center'    },    modalContainer: {        marginLeft: 20,        marginRight: 20,        borderRadius: 3,        backgroundColor: "white",        alignItems:'center',    },    modalTitle: {        color: '#000000',        fontSize: 16,        marginTop: 10,    },    modalMessage:{        color:'#8a8a8a',        fontSize:14,        margin:10,    },    row:{        flexDirection:'row',        alignItems:'center',    },    horizonLine:{        backgroundColor:'#9f9fa3',        height:0.5,        alignSelf:'stretch'    },    verticalLine:{        backgroundColor:'#9f9fa3',        width:1,        alignSelf:'stretch'    },    leftBn:{        borderBottomLeftRadius:3,        padding:7,        flexGrow:1,        justifyContent:'center',        alignItems:'center',    },    leftBnText:{        fontSize:16,        color:'#8a8a8a',    },    rightBn:{        borderBottomRightRadius:3,        padding:7,        flexGrow:1,        justifyContent:'center',        alignItems:'center',    },    rightBnText:{        fontSize:16,        color:'#00A9F2'    }})

visible bool 控制弹出框隐藏(false)或显示(true)
transparent bool 控制弹出框背景，若为false则弹出框背景为灰色，会挡住弹出框后面的内容，true时才为modal根视图的背景颜色。
animationType string 控制弹出框的动画效果有三个值：none slide fade
onRequestClose func 当请求关闭时执行

使用：

<CustomModal title="标题" message="消息"  ref="_customModal" visibility={this.state.modalVisibility}                             onLeftPress={()=>{this.setState({modalVisibility:false})}} onRightPress={()=>{this.setState({modalVisibility:false})}}/>

源码

0 0