Реализация простого модального окна в React Native ломает мой пользовательский интерфейс

Question

У меня есть следующая страница регистрации:

import React from "react";
import { Input } from "react-native-elements";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  TouchableOpacity,
  Modal,
  Image,
  Alert,
} from "react-native";

export default class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Binders</Text>
        <Text style={styles.slogan}>Création de compte</Text>
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "user" }}
          placeholder="Pseudo"
        />
        <Input
          // inputStyle={styles.input}
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "envelope" }}
          placeholder="Adresse email"
        />
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "lock" }}
          placeholder="Mot de passe"
          secureTextEntry
        />
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "lock" }}
          placeholder="Mot de passe"
          secureTextEntry
        />
        <TouchableOpacity style={styles.signup}>
          <Text>Inscription</Text>
        </TouchableOpacity>
        <Text style={styles.already_signed}>Déjà inscris?</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
  already_signed: {
    position: "absolute",
    left: "5.2%",
    top: "88%",
    fontSize: 15,
  },
  title: {
    position: "absolute",
    left: "5.2%",
    top: "12.34%",
    fontStyle: "normal",
    fontWeight: "bold",
    fontSize: 32,
    lineHeight: 32,
    display: "flex",
    alignItems: "center",
    color: "#000000",
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    top: "40%",
    left: "5.2%",
  },
  slogan: {
    position: "absolute",
    left: "5.2%",
    top: "18.9%",
    fontStyle: "normal",
    fontWeight: "normal",
    fontSize: 17,
    lineHeight: 17,
    display: "flex",
    alignItems: "center",
    color: "#000000",
  },
  inputContainer: {
    borderBottomColor: "#F5FCFF",
    backgroundColor: "#FFFFFF",
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: "row",
    alignItems: "center",
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    borderBottomColor: "#FFFFFF",
    flex: 1,
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: "center",
  },
  buttonContainer: {
    height: 45,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  },
  signupButton: {
    backgroundColor: "#FF4DFF",
  },
  signUpText: {
    color: "white",
  },
  signup: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    top: "70%",
    borderRadius: 8,
    left: "5.2%",
    borderWidth: 3,
    borderColor: "#000000",
    width: "88%",
    height: "8%",
  },
});

Однако всякий раз, когда я хочу добавить в нее модальное окно, все пользовательские интерфейсы ломаются:

import React from "react";
import { Input } from "react-native-elements";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  TouchableOpacity,
  Modal,
  Image,
  Alert,
} from "react-native";

export default class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal>
        <Text style={styles.title}>Binders</Text>
        <Text style={styles.slogan}>Création de compte</Text>
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "user" }}
          placeholder="Pseudo"
        />
        <Input
          // inputStyle={styles.input}
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "envelope" }}
          placeholder="Adresse email"
        />
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "lock" }}
          placeholder="Mot de passe"
          secureTextEntry
        />
        <Input
          containerStyle={styles.input}
          leftIcon={{ type: "font-awesome", name: "lock" }}
          placeholder="Mot de passe"
          secureTextEntry
        />
        <TouchableOpacity style={styles.signup}>
          <Text>Inscription</Text>
        </TouchableOpacity>
        <Text style={styles.already_signed}>Déjà inscris?</Text>
      </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
  already_signed: {
    position: "absolute",
    left: "5.2%",
    top: "88%",
    fontSize: 15,
  },
  title: {
    position: "absolute",
    left: "5.2%",
    top: "12.34%",
    fontStyle: "normal",
    fontWeight: "bold",
    fontSize: 32,
    lineHeight: 32,
    display: "flex",
    alignItems: "center",
    color: "#000000",
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    top: "40%",
    left: "5.2%",
  },
  slogan: {
    position: "absolute",
    left: "5.2%",
    top: "18.9%",
    fontStyle: "normal",
    fontWeight: "normal",
    fontSize: 17,
    lineHeight: 17,
    display: "flex",
    alignItems: "center",
    color: "#000000",
  },
  inputContainer: {
    borderBottomColor: "#F5FCFF",
    backgroundColor: "#FFFFFF",
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: "row",
    alignItems: "center",
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    borderBottomColor: "#FFFFFF",
    flex: 1,
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: "center",
  },
  buttonContainer: {
    height: 45,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  },
  signupButton: {
    backgroundColor: "#FF4DFF",
  },
  signUpText: {
    color: "white",
  },
  signup: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    top: "70%",
    borderRadius: 8,
    left: "5.2%",
    borderWidth: 3,
    borderColor: "#000000",
    width: "88%",
    height: "8%",
  },
});

Я пытался добавить стиль = {styles.container} в модальном окне, но тогда используется только половина экрана. Как лучше всего добавить дочерний компонент, не нарушая целостность CSS на основе styles.container?

Answer 1

попробуйте с этим ... Поместите ваши модальные компоненты внутрь, ниже maked

render() { 
  if (!this.state.modalVisible)
    return null
  return (
     <View>
        <Modal 
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {this.setModalVisible(false)}}
        >
          <TouchableOpacity 
            style={styles.container} 
            activeOpacity={1} 
            onPressOut={() => {this.setModalVisible(false)}}
          >
            <ScrollView 
              directionalLockEnabled={true} 
              contentContainerStyle={styles.scrollModal}
            >
              <TouchableWithoutFeedback>
                <View style={styles.modalContainer}>
                  // Body of your modal content
                </View>
              </TouchableWithoutFeedback>
            </ScrollView>
          </TouchableOpacity>   
        </Modal> 
     </View>
  )
} 

// Затем в setModalVisible () вы сделаете все, что вам нужно сделать при закрытии или открытии модального окна.

setModalVisible = (visible) => {
    this.setState({
        modalVisible: visible,
    })
}