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

来源：互联网发布：怎么在淘宝内置密码编辑：程序博客网时间：2024/05/17 01:13

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

0 0