无涯教程-React Native - 模型(Modal) 在本章中，我们将向您展示如何在React Native中使用

在本章中，我们将向您展示如何在React Native中使用模式组件，现在让我们创建一个新文件: ModalExample.js，我们将逻辑放在 ModalExample 中，我们可以通过运行 toggleModal 来更新初始状态。

通过运行 toggleModal 更新初始状态后，我们将 visible 属性设置为模态，onRequestClose 对于Android设备是必需的。

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.") } }>
           </span><span class="pun">&lt;</span><span class="typ">View</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">}&gt;</span><span class="pln">
              </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">text</span><span class="pun">}&gt;</span><span class="typ">Modal</span><span class="pln"> </span><span class="kwd">is</span><span class="pln"> open</span><span class="pun">!&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
              
              </span><span class="pun">&lt;</span><span class="typ">TouchableHighlight</span><span class="pln"> onPress</span><span class="pun">={()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                 </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">toggleModal</span><span class="pun">(!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">modalVisible</span><span class="pun">)}}&gt;</span><span class="pln">
                 
                 </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">text</span><span class="pun">}&gt;</span><span class="typ">Close</span><span class="pln"> </span><span class="typ">Modal</span><span class="pun">&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
              </span><span class="pun">&lt;/</span><span class="typ">TouchableHighlight</span><span class="pun">&gt;</span><span class="pln">
           </span><span class="pun">&lt;/</span><span class="typ">View</span><span class="pun">&gt;</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="typ">Modal</span><span class="pun">&gt;</span><span class="pln">
        
        </span><span class="pun">&lt;</span><span class="typ">TouchableHighlight</span><span class="pln"> onPress</span><span class="pun">={()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">toggleModal</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">)}}&gt;</span><span class="pln">
           </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">text</span><span class="pun">}&gt;</span><span class="typ">Open</span><span class="pln"> </span><span class="typ">Modal</span><span class="pun">&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="typ">TouchableHighlight</span><span class="pun">&gt;</span><span class="pln">
     </span><span class="pun">&lt;/</span><span class="typ">View</span><span class="pun">&gt;</span><span class="pln">
  </span><span class="pun">)</span><span class="pln">

}
}
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
}
})

我们的启动屏幕将如下所示:

如果单击按钮，将打开模态。

无涯教程-React Native - 模型(Modal)

参考链接