Css 如何在react native中垂直和水平对齐模态

我试图写一个注册表格和它的加载屏幕模式

由于某些原因，模态没有垂直和水平对齐

<View style={{flex: 1,flexDirection: 'column',alignItems: 'center'}}>

      <View>
         <Text>Something</Text>
         <Text>Something</Text>
         <Text>Something</Text>
         <Text>Something</Text> 
         <Text>Something</Text>

        <TouchableOpacity style={styles.button} onPress={() => alert('hello')}>
          <Text style={styles.button_text}>CREATE YOUR NEW ACCOUNT</Text>
        </TouchableOpacity>
      </View>

      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
            setModalVisible(!modalVisible);
          }}>
          <View
            style={{width: 300, height: 300, backgroundColor: 'red'}}></View>
        </Modal>
      </View>
    </View>

某物
某物
某物
某物
某物
警报（'hello'）}>
创建您的新帐户
{
警报。警报（'模式已关闭'）；
setModalVisible（！modalVisible）；
}}>

有人能帮忙吗，这是目前的情况， 我希望模态在屏幕上水平和垂直对齐

试试这个

    <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
        setModalVisible(!modalVisible);
      }}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
         <View style={{width: 300, height: 300, backgroundColor: 'red'}}>
            ...other components you need
         </View>
      </View>
    </Modal>

{
警报。警报（'模式已关闭'）；
setModalVisible（！modalVisible）；
}}>
…您需要的其他组件