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

上一章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, }, });

开始的屏幕是这样的