Модальное всплывающее окно не центрируется

Question

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

Я попытался отредактировать положение модального стиля в таблице стилей, и я ввел числа для его левого и правого положения, которое он перемещает. Тем не менее, я считаю, что в этом нет необходимости, поскольку его контейнер уже расположен в центре экрана. Кроме того, при вводе этих значений оно будет выглядеть по-разному на разных экранах

import React, { Component } from 'react';
import {
  Platform,
  Animated,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  Image,
  TouchableHighlight,
  Modal,
  TouchableOpacity,
} from 'react-native';
import { AsyncStorage } from 'react-native';
import Animater from './Animater';
import HscoreImage from './HscoreImage';


const AnimatedButton = Animated.createAnimatedComponent(TouchableHighlight);

export default class GameActivity extends Component {
  constructor(props) {
    super(props);

    // AsyncStorage.setItem('hscore', '1');
    this.state = {
      cscore: 0,
      hscore: 0,
      modalVisible: false,
    };
  }


  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  static navigationOptions = {
    title: "Game",
    headerStyle: {
      backgroundColor: "#73C6B6"
    }
  };


  componentDidMount() {

    this.retrieveData();

  }

  getPoints = isLost => {
    if (isLost) {
      this.setState({ cscore: 0 }, () => {
        this.updatehscore()
      });
    } else {
      this.setState({ cscore: this.state.cscore + 1 }, () => {
        this.updatehscore()
      });

      //console.log( 'hscore after retrieve'  + this.retrieveData() );
    }


  }; //end of getpoints

  updatehscore = () => {
    if (this.state.cscore > this.state.hscore) {

      // this.setState({ hscore: this.state.cscore });
      this.storeData(this.state.cscore);

    }
    this.retrieveData();
  }

  // create a function that saves your data asyncronously
  storeData = async score => {
    try {
      await AsyncStorage.setItem('hscore', score.toString());
      console.log('Saved');
      //Alert.alert('Saved')
    } catch (error) {
      // Error saving data
      console.log('Error saving score');
    }

  };

  // fetch the data back asyncronously
  retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('hscore');
      const item = JSON.parse(value);

      if (item == null) {
        this.setState({ hscore: 0 });
      } else if (item !== null) {
        // Our data is fetched successfully
        this.setState({ hscore: item });
        console.log('IF NOT NULL: ' + parseInt(item));
        return parseInt(item);
      }
    } catch (error) {
      // Error retrieving data
      AsyncStorage.setItem('hscore', '0');
      console.log('Error getting score ' + error);
    }
  };


  render() {
    return (
      <View style={styles.mainContainer}>
        <View style = {styles.containerHscore}>
        <View style = {styles.hscoreImage}>
        <HscoreImage />
        </View>
        <Text style={styles.hscore}>
          {this.state.hscore}
        </Text>
        </View>
        <Text style={styles.score}>
          {this.state.cscore}
        </Text>
        <View style={styles.container}>
          <Animater callForPoints={this.getPoints}  currentScore = {this.state.cscore}/>


        <Modal 
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>

            <View style= {styles.modalContent}>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text> 
              </TouchableHighlight>
            </View>

        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
       </View>
     </View>

      //<PresentationalComponent color = {[animatedStyle]} showAlert = {this.showAlert}/>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    // display: flex,
    flex: 1,
    backgroundColor: '#00c4cc',
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  score: {
    position: 'absolute',
    textAlign: 'center',
    fontSize: 175,
    justifyContent: 'center',
    alignItems: 'center',
    top: 45,
  },
  hscore: {
    textAlign: 'right',
    fontSize: 40,
    justifyContent: 'center',
    alignItems: 'center',
    top: 50,
  },
  hscoreImage: {
    alignSelf:'flex-end',
    justifyContent: 'center',
    alignItems: 'center',
    top: 50,
  },
  containerHscore: {
    flexDirection: 'row',
    alignSelf:'flex-end',

  },
  modalContent: {
    backgroundColor: 'white',
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 100,
    width: 20,
    height: 20,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
});

Я ожидаю, что модальное изображение появится в центре экрана, но это не так.

Answer 1

Создайте модальный вид сначала с ...

flex: 1,
alignItems: 'center',
justifyContent: 'center'

, затем с центром в вашем контенте

, например

<Modal>
    <View
        style = {{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }}
    >
        //All view here will be centered, replace below view with your own
        <View
           style = {{
               backgroundColor: 'red',
               height: 20,
               width: 20
           }}
        />
    </View>
</Modal>