美文网首页程序员
react-native如何modal出视图

react-native如何modal出视图

作者: 请叫我啊亮 | 来源:发表于2017-09-04 16:51 被阅读33次

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

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()

相关文章

  • react-native如何modal出视图

    很简单,直接代码,一看就懂 如下使用:在想要弹出视图的组件render方法中写上下面 点击按钮调用方法

  • 如何封装React-Native的Modal

    React-Native中的Modal组件可以用来覆盖包含React Native根视图的原生视图,是RN经常需要...

  • React Native之Modal组件实现遮罩层效果

    React-Native中Modal的使用

  • Modal的运用与理解

    Modal是什么。 官网解释为:Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIVi...

  • Modal组件

    Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Act...

  • ios中的视图跳转方式

    16/08/04/wed iOS视图跳转的方式 1.使用modal方式进行跳转 modal方式跳转,其实就是通过方...

  • swift mvp demo

    MVP 即 Modal View Presenter(模型 视图 协调器),MVP 实现了 Cocoa 的 MVC...

  • 架构(上)

    一:MVC:Modal View Controller(模型/视图/控制器) 1.Model 和 View 永远不...

  • iOS 框架 MVP

    一 :前言 从字面意思来理解,MVP 即 Modal View Presenter(模型 视图 协调器),MVP ...

  • React-Native Modal实现遮罩界面

    Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。实现遮罩的功能 实现modal代码: 测试发现o...

网友评论

    本文标题:react-native如何modal出视图

    本文链接:https://www.haomeiwen.com/subject/dmmejxtx.html