react-native如何modal出视图

很简单,直接代码,一看就懂

import React from'react';
import {Text, View, TouchableOpacity, Modal} from 'react-native';

export default class ConferenceCallPage extends React.PureComponent {

    show() {
        this.setState({isPop: true });
    }

   state = { isPop: false };

    render() {
        return (
            <Modal animationType="slide" visible={this.state.isPop}>
                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'red',fontSize:18,width:300}}>我是modal出来的视图</Text>
                    <Text onPress={()=>this.setState({isPop:false})} style={{color:'red',fontSize:18, marginTop:100}}>点我取消</Text>
                </View>
            </Modal>
        );
    }
}

如下使用:
在想要弹出视图的组件render方法中写上下面

  <ConferenceCallPage ref="conferenceCallPage"/>

点击按钮调用方法

 this.refs.conferenceCallPage.show()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容