在本章中,我们将向您展示如何在React Native中使用模式组件,现在让我们创建一个新文件: ModalExample.js,我们将逻辑放在 ModalExample 中,我们可以通过运行 toggleModal 来更新初始状态。
通过运行 toggleModal 更新初始状态后,我们将 visible 属性设置为模态,onRequestClose 对于Android设备是必需的。
App.js
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-modal.html
来源:LearnFk无涯教程网
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 } })
我们的启动屏幕将如下所示:
如果单击按钮,将打开模态。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)