Я новичок в React Native и пытался создать Modal на основе документов https://reactnative.dev/docs/modal.
Я попытался скопировать пример модального компонента Function/Class в новый проект. Но то, что я вижу, это просто прямоугольник с красной рамкой, который постоянно появляется, даже когда я настраиваю visible = {false}
. Однако, когда я добавил функцию console.log()
, она выводит так, как и ожидалось. У кого-нибудь есть проблемы с этим? Вот как это выглядит: модальное окно реакции постоянно с красной рамкой Кроме того, я видел, как кто-то еще публикуя решение в этом сообщении: реагировать на собственный модальный режим всегда виден, но ни одно из решений работал.
Код точно такой же, как в документации. https://reactnative.dev/docs/modal.
import React, { Component } from "react";
import {
Alert,
Modal,
StyleSheet,
Text,
TouchableHighlight,
View
} from "react-native";
class App extends Component {
state = {
modalVisible: false
};
setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
console.log(this.state.modalVisible)
}
render() {
const { modalVisible } = this.state;
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
style={styles.openButton}
onPress={() => {
this.setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
openButton: {
backgroundColor: "#F194FF",
borderRadius: 20,
padding: 10,
elevation: 2
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
export default App;