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,
    View,
    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
    }
});