React Native模态框Modal – React Native实战教程

上一章React Native实战教程请查看：React Native WebView使用

在本章中，我们将向你展示如何在React Native中使用modal模态框组件。

现在让我们创建一个新文件：ModalExample.js

我们将把逻辑放在ModalExample中，可以通过运行toggleModal来更新初始状态。

通过运行toggleModal更新初始状态之后，我们将把可视属性设置为我们的模态，当状态改变时，此prop将被更新。

Android设备需要onRequestClose。

App.js

import React, {Component} from 'react';
import WebViewExample from './modal_example.js';

const Home = () => {
  return <WebViewExample />;
};
export default Home;

modal_example.js

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, StyleSheet} from 'react-native';
class ModalExample extends Component {
  state = {
    modalVisible: false,
  };
  toggleModal(visible) {
    this.setState({modalVisible: visible});
  }
  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType={'slide'}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            console.log('Modal has been closed.');
          }}>
          <View style={styles.modal}>
            <Text style={styles.text}>Modal is open!</Text>

            <TouchableHighlight
              onPress={() => {
                this.toggleModal(!this.state.modalVisible);
              }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.toggleModal(true);
          }}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
export default ModalExample;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#ede3f2',
    padding: 100,
  },
  modal: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#f7021a',
    padding: 100,
  },
  text: {
    color: '#3f2949',
    marginTop: 10,
  },
});

开始的屏幕是这样的

如果我们点击按钮，模态将打开。