如何制作React Native Modal Window?

时间:2018-08-06 13:53:55

标签: javascript reactjs react-native modal-window

官方文档网站(React Native)上有一个“模态窗口”示例。

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

class ModalExample extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

如果我将其放入CodePen中-屏幕上将不会出现任何内容 这个例子是100%可行的,但是它缺少一件事。否

  

ReactDOM.render

最后的元素。

问题是如何在这里正确编写ReactDOM.render?这样我就可以在CodePen窗口中看到一些视觉信息。

0 个答案:

没有答案