React Native - Phương thức
Trong chương này, chúng tôi sẽ hướng dẫn bạn cách sử dụng modal component trong React Native.
Bây giờ chúng ta hãy tạo một tệp mới: ModalExample.js
Chúng tôi sẽ đưa logic vào bên trong ModalExample. Chúng tôi có thể cập nhật trạng thái ban đầu bằng cách chạytoggleModal.
Sau khi cập nhật trạng thái ban đầu bằng cách chạy toggleModal, chúng tôi sẽ thiết lập visibletài sản cho phương thức của chúng tôi. Hỗ trợ này sẽ được cập nhật khi trạng thái thay đổi.
Các onRequestClose là bắt buộc đối với thiết bị 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.") } }>
<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
}
})
Màn hình bắt đầu của chúng ta sẽ trông như thế này -
Nếu chúng ta nhấp vào nút, phương thức sẽ mở ra.