官方文档网站(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窗口中看到一些视觉信息。