RN 浮层组件(Modal)

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