美文网首页
RN 浮层组件(Modal)

RN 浮层组件(Modal)

作者: 风之化身呀 | 来源:发表于2018-08-17 20:57 被阅读1032次

    1、使用方式

    这里采用第三方组件react-native-root-modal,RN提供的不好用

    • 使用render渲染
    render() {
        const { visible } = this.state;
        return (
          <Modal style={styles.container} visible={visible}>
            <TouchableOpacity style={styles.cover} onPress={this._close}></TouchableOpacity>
            <View style={styles.content}>
              <Text style={styles.title}>语音支持存储到"文件"</Text>
              <Text style={[styles.message, { marginTop: 20 }]}>
                1.点击保存后,将弹出系统弹框!
              </Text>
              <Text style={styles.message}>
                2.点击系统弹框中「存储到“文件”」按钮,保存语音文件至本地。
              </Text> 
              <Button title={'知道了'} color={'red'} onPress={this._close}/>
            </View>
          </Modal>
        );
        // return null
      }
    
    

    注意点:1、使用visible控制显示隐藏;2、container要使用绝对定位;3、注意加蒙层

    • 编程式渲染
    let modal = new ModalManager(<View><Text>
          AAA
        </Text>
        </View>);
        setTimeout(() => {
          modal.update(<View><Text>
            BBB
          </Text>
          </View>)
        }, 2000);
        setTimeout(() => {
          modal.destroy();
        }, 3000)
    

    注意点:1、创建即显示,所以可用状态控制;2、更新方法update;3、销毁方法destroy;4、脱离React更新机制,可看成DOM操作

    2、完整Demo

    /**
     *  @providesModule components/SaveGuide
     */
    
    import PropTypes from 'prop-types';
    import React, { PureComponent } from 'react';
    import {
      StyleSheet,
      View,
      Text,
      Button,
      TouchableOpacity
    } from 'react-native';
    
    import Modal,{ Manager as ModalManager} from 'react-native-root-modal';
    
    const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        justifyContent: 'center',
        alignItems: 'center'
      },
    
      cover: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.2)'
      },
    
      content: {
        width:'80%',
        paddingBottom: 30,
        flexDirection: 'column',
        backgroundColor: '#FFF',
        borderRadius: 5,
        shadowOffset: { width: 0, height: 5 },
        shadowRadius: 3,
        shadowColor: '#41464b',
        shadowOpacity: 0.1,
        elevation: 5
      },
    
      title: {
        fontSize: 16,
        color: '#41464b',
        fontWeight: 'bold',
        lineHeight: 20,
        textAlign: 'center',
        marginTop: 35
      },
    
      message: {
        fontSize: 13,
        color: '#41464b',
        lineHeight: 22,
        textAlign: 'left',
        marginLeft: 35,
        marginRight: 35
      },
    
      close: {
        // width:'80%',
        width:200,
        height: 50,
        marginTop:20,
        backgroundColor:'red',
        color:'red'
    
      }
    });
    
    class UpdateAlert extends PureComponent {
      static displayName = 'UpdateAlert';
    
      constructor(props) {
        super(props);
        this.state = {
          visible: true
        };
        // let modal = new ModalManager(<View><Text>
        //   AAA
        // </Text>
        // </View>);
        // setTimeout(() => {
        //   modal.update(<View><Text>
        //     BBB
        //   </Text>
        //   </View>)
        // }, 2000);
        // setTimeout(() => {
        //   modal.destroy();
        // }, 3000)
        
        
      }
    
      _close = () => {
        this.setState({
          visible: false
        });
      };
    
      render() {
        const { visible } = this.state;
        return (
          <Modal style={styles.container} visible={visible}>
            <TouchableOpacity style={styles.cover} onPress={this._close}></TouchableOpacity>
            <View style={styles.content}>
              <Text style={styles.title}>语音支持存储到"文件"</Text>
              <Text style={[styles.message, { marginTop: 20 }]}>
                1.点击保存后,将弹出系统弹框!
              </Text>
              <Text style={styles.message}>
                2.点击系统弹框中「存储到“文件”」按钮,保存语音文件至本地。
              </Text> 
              <Button title={'知道了'} color={'red'} onPress={this._close}/>
            </View>
          </Modal>
        );
        // return null
      }
    }
    
    export default UpdateAlert
    
    

    相关文章

      网友评论

          本文标题:RN 浮层组件(Modal)

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