Реагировать на собственный компонент ядра Modal, всегда видимый с красной рамкой, даже если параметр visible = {false} - PullRequest
Новая
       17

Реагировать на собственный компонент ядра Modal, всегда видимый с красной рамкой, даже если параметр visible = {false}

0 голосов
/ 18 апреля 2020

Я новичок в React Native и пытался создать модал на основе документов 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;
...