React Native中Modal无法保持屏幕居中的技术问询

我是React Native新手，正在学习组件的正确定位方法。我制作了一个Modal，希望它能显示在背景内容的上方，但只有移除创建白色盒子的视图后，它才会出现在屏幕中间。

屏幕渲染代码 #

<View style={Styles.background}>
  <View style={{justifyContent:'flex-start', alignItems:'center'}}>
    <View style={{
      backgroundColor:Colors.gtechWhite,
      width:'80%',
      height:'25%'
    }}>
    </View>
  </View>

  <View style={{flex:1, justifyContent:'center', alignItems:'center'}} >
    {addExerciseModalOpen && <AddExerciseModal setAddExerciseModalOpen={setAddExerciseModalOpen}/>}
  </View>
  <View style={{ position:'absolute', right:'6%', bottom:'14%', alignItems:'flex-end'}} >
    {filterModalOpen && <FilterModal selectedFilter={selectedFilter} setSelectedFilter={setSelectedFilter}  />}
  </View>
  <View style={{position:'absolute', right:'6%', bottom:'8%', alignItems:'flex-end', flexDirection:'row'}}>
    <Pressable
      style={{paddingRight:35}}
      onPress={()=>{
        Haptics.notificationAsync(
          Haptics.NotificationFeedbackType.Success
        )
        setAddExerciseModalOpen(false)
        setFilterModalOpen(!filterModalOpen);
      }}
    >
      <Octicons name="filter"  size={40} color={Colors.darkMode.button} />
    </Pressable>
    <Pressable
      onPress={()=>{
        Haptics.notificationAsync(
          Haptics.NotificationFeedbackType.Success
        )
        setFilterModalOpen(false)
        setAddExerciseModalOpen(!addExerciseModalOpen);
      }}
    >
      <Ionicons name="add-circle-outline" size={40} color={Colors.darkMode.button}/>
    </Pressable>
  </View>
</View>

待居中的Modal组件代码 #

<View style={{
  flexDirection:'row',
  position: 'absolute',
  justifyContent: 'flex-start',
  alignItems: 'flex-start',
  width: '80%',
  height: '34%',
  borderRadius: 25,
  backgroundColor: Colors.darkMode.cards1,
  overflow: 'hidden' }}>
  <View style={{flex:1, top:10}}>
    <View style={{ alignItems: 'center', paddingBottom:25}} >
      <Text style={Styles.modalTitleText}>Add An Exercise</Text>

      <TextInput
        placeholder="Exercise Name"
        placeholderTextColor="#ffffff"
        style={{
          color:'white',
          fontFamily:'RobotoSlab-Bold',
          fontSize:15,
          marginLeft:25,
          width:'90%',
          marginTop:25,
          height:45}}
      />
      <WhiteDivider dividerWidth={90} dividerMarginVertical={0}/>
      <View style={{
        flexDirection:'row',
        flexGrow:1,
        paddingTop:25,
        marginRight:15,
        marginLeft:15,
      }}>
        <ScrollView
          style={{width:'100%'}}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
        >
          {ExerciseCategories()}
        </ScrollView>
      </View>
      <View style={{
        flexDirection:'row',
        flexGrow:1,
        paddingTop:15,
        marginRight:15,
        marginLeft:15,
      }}>
        <Pressable
          style={{alignItems:'center', backgroundColor:Colors.gtechWhiteTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
          onPress={()=>setAddExerciseModalOpen(false)}
        >
          <Text style={{
            color: Colors.gtechGold,
            fontSize: 17,
            fontFamily: 'RobotoSlab-Medium'}}
          >
            CANCEL
          </Text>
        </Pressable>
      </View>
      <View style={{
        flexDirection:'row',
        flexGrow:1,
        paddingTop:15,
        marginRight:15,
        marginLeft:15,
      }}>
        <Pressable
          style={{alignItems:'center', backgroundColor:Colors.gtechGoldTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
          onPress={()=>setAddExerciseModalOpen(false)}
        >
          <Text style={{
            color: Colors.gtechGold,
            fontSize: 17,
            fontFamily: 'RobotoSlab-Medium'}}
          >
            SAVE EXERCISE
          </Text>
        </Pressable>
      </View>
    </View>
  </View>
</View>

问题截图 #

修复方案 #

1. 调整Modal外层容器布局

把Modal所在的flex:1容器替换成绝对定位的全屏容器，确保它不受其他元素布局影响，同时直接居中：

// 替换原来的Modal外层View
<View style={{
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 10 // 确保层级高于背景元素
}}>
  {addExerciseModalOpen && <AddExerciseModal setAddExerciseModalOpen={setAddExerciseModalOpen}/>}
</View>

2. 修正Modal自身样式

移除Modal根View的position: absolute（依赖外层容器居中），或者如果保留绝对定位，添加平移属性实现居中，同时调整内容对齐方式：

<View style={{
  flexDirection:'row',
  // 若保留绝对定位，用以下代码实现居中
  // position: 'absolute',
  // top: '50%',
  // left: '50%',
  // transform: [{translateX: -50%}, {translateY: -50%}],
  justifyContent: 'flex-start',
  alignItems: 'center', // 让内容水平居中
  width: '80%',
  height: '34%',
  borderRadius: 25,
  backgroundColor: Colors.darkMode.cards1,
  overflow: 'hidden' 
}}>

3. 确保层级顺序

把Modal的容器放在屏幕最外层View的末尾，React Native中后渲染的组件默认层级更高，会自然覆盖在白色盒子上方。

内容的提问来源于stack exchange，提问作者RogueGingerz