React-Native学习笔记之：Modal实现覆盖效果类似安卓中PopuWindow

Modal组件可以用来覆盖包含React Native根视图的原生视图,类似于Android原生控件中的PopuWindow效果。
  例如点击某个Button会在当前页面上弹出一个覆盖层页面，可以在上面实现指定的操作。

import React,{Component} from 'react';

import {
    AppRegistry,StyleSheet,View,TouchableOpacity,Text
} from 'react-native';
import ModalPage from './ModalPage'
export default class StudyGithub extends Component {
    constructor(props) {
        super(props);
        this.state = {
            /*设置弹出框是否可见*/
            viewCanVisible: false,}
    }

    render() {
        return (<View>
            <TouchableOpacity onPress={()=>this.showPage()}>
                <Text style={styles.tabText}>点击可以弹出页面</Text>
            </TouchableOpacity>
            {/*根布局中添加弹出框层*/}
            {this.renderVisibleView()}
        </View>);
    }

    /** * visible={this.state.viewCanVisible}设置是否可见 * onClose设置关闭操作 * @returns {XML} */
    renderVisibleView() {
        return (
            <ModalPage
                visible={this.state.viewCanVisible}
                {...this.props}
                onClose={()=> {
                    this.setState({viewCanVisible: false})
                }}/>
        )
    }

    /** * 弹出框可见 */
    showPage() {
        this.setState({viewCanVisible: true});
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },tabText: {
        fontSize: 20,color: 'blue',margin: 20,paddingLeft: 15
    },});

AppRegistry.registerComponent('StudyGithub',() =>StudyGithub);

覆盖层页面js实现：

import React,{Component} from 'react';
import {
    StyleSheet,Text,Modal,ScrollView,TouchableHighlight,Platform
} from 'react-native';
export default  class ModalPage extends Component {
    constructor(props) {
        super(props)
    }

    /** * animationType设置动画类型:PropTypes.oneOf(['none','slide','fade']) *transparent:是否透明 * visible：是否可见 * onRequestClose：关闭操作 * @returns {XML} */
    render() {
        return (<Modal
            animationType={"slide"}
            transparent={true}
            visible={this.props.visible}
            onRequestClose={() => {
                this.props.onClose();
            }}
        >
            <ScrollView style={styles.modalContainer}>
                {this.renderThemeItems()}
            </ScrollView>
        </Modal>)
    }

    /** * 随意添加五个Text，根据实际情况修改 * @returns {Array} */
    renderThemeItems() {
        var views = [];
        for (let i = 0,length = 5; i < length; i++) {
            views.push(<View key={i}>
                {this.getContentItem('每一行的内容,点击弹出框会消失')}
            </View>)
        }
        return views;
    }

    getContentItem(content) {
        return (
            <TouchableHighlight
                style={{flex: 1}}
                underlayColor='blue'
                onPress={()=>this.onClickItem()}
            >
                <View>
                    <Text style={{fontSize:20,color:'white',margin:5,paddingLeft:20}}>{content}</Text>
                </View>
            </TouchableHighlight>
        );
    }


    onClickItem() {
        this.props.onClose();
    }
}
const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,margin: 10,marginTop: Platform.OS === 'ios' ? 20 : 10,backgroundColor: 'gray',borderRadius: 3,shadowColor: 'gray',shadowOffset: {width: 2,height: 2},shadowOpacity: 0.5,shadowRadius: 2,padding: 3
    }
});

原文地址：https://www.jb51.cc/react/304227.html