Блог

У меня Проблема.

Проблема в том, что мой модальный не закрывается, когда я провожу пальцем вниз. Как я могу это изменить?

Я перепробовал так много вещей, но ничего не получалось.

Чтобы увидеть проблему, нажмите здесь (видео/GIF)

Я новичок в React и не знаю, много ли информации, которую я написал, или нет. Если вам нужна дополнительная информация, просто запишите ее.

 import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Image,
  TouchableOpacity,
  Modal,
} from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import StundenplanBoxScreen from "../Stundenplan/StundenplanBoxScreen.js";

const Stundenplan = ({ navigation }) => {
  const [modalOpen, setModalOpen] = useState(false);
  const setConst = () => setModalOpen((previousState) => !previousState);
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.boxlogo}>
          <Image source={yourLogo} style={styles.logo} />
        </View>
        <View style={styles.centeredView}>
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalOpen}
            presentationStyle="pageSheet"
            onSwipeComplete={() => setModalOpen(false)}
            swipeDirection="down"
          >
            <View style={styles.HinzufuegenModal}>
              <Text>Hello!</Text>
            </View>
          </Modal>
        </View>
        <StundenplanBoxScreen />
      </ScrollView>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.bottom}
      >
        <TouchableOpacity onPress={setConst}>
          <View style={styles.Hinzufuegen}>
            <Text style={styles.HinzufuegenText}> </Text>
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default Stundenplan;

const yourLogo = require("../adaptive-icon.png");

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FEF5E2",
  },

  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },

  boxlogo: {
    justifyContent: "center",
    alignItems: "center",
    marginTop: Platform.OS === "ios" ? -10 : 5,
  },

  logo: {
    width: 100,
    height: 100,
    resizeMode: "contain",
  },

  box: {
    backgroundColor: "#FFF",
    paddingBottom: 15,
    marginTop: -5,
    margin: Platform.OS === "ios" ? 20 : 25,
    borderRadius: 6,
    //Shadow
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 9,
    },
    shadowOpacity: 0.48,
    shadowRadius: 11.95,
    elevation: 18,
  },

  HinzufuegenModal: {
    margin: 20,
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    backgroundColor: "#FFF",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 9,
    },
    shadowOpacity: 0.48,
    shadowRadius: 11.95,
    elevation: 18,
  },

  inhalt: {
    padding: Platform.OS === "ios" ? 20 : 17,
  },

  uberschrift: {
    fontWeight: "500",
    fontSize: 19,
  },

  beschreibungTitle: {
    fontSize: 48,
    fontWeight: "bold",
    marginTop: Platform.OS === "ios" ? -10 : 5,
  },

  bottom: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },

  Hinzufuegen: {
    width: 60,
    height: 60,
    backgroundColor: "#FFF",
    borderRadius: 10,
    bottom: Platform.OS === "ios" ? 125 : 110,
    right: Platform.OS === "ios" ? -310 : -325,
    justifyContent: "center",
    alignItems: "center",
    //Shadow
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 9,
    },
    shadowOpacity: 0.48,
    shadowRadius: 11.95,
    elevation: 18,
  },

  HinzufuegenButton: {
    width: 60,
    height: 60,
    backgroundColor: "#FFF",
    borderRadius: 10,
    bottom: Platform.OS === "ios" ? 125 : 110,
    right: Platform.OS === "ios" ? -310 : -325,
    justifyContent: "center",
    alignItems: "center",
    //Shadow
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 9,
    },
    shadowOpacity: 0.48,
    shadowRadius: 11.95,
    elevation: 18,
  },

  HinzufuegenText: {
    fontSize: 35,
    color: "#02131C",
  },
});