React Native设置Modal高度后仍全屏显示无法正常展示如何解决

问题原因 #

React Native 官方提供的 Modal 组件默认会占满整个屏幕窗口，你仅给内部嵌套的 View 设置高度是无法改变 Modal 本身的全屏行为的。

解决方案 #

第一步：修改Modal属性与内部结构 #

给Modal添加transparent={true}属性，让Modal的根背景透明，再新增一层全屏的容器View用来做背景层，你需要的提示框放在这层容器内部，就能自由控制提示框的尺寸了。
修改后的JSX代码：

return (
    <>
        <Modal
          animationType="fade" // 轻提示用fade动画比slide更合适，也可以保留你原来的slide
          transparent={true} // 核心：开启Modal背景透明
          visible={showImageViewer && savedPhoto}
          onRequestClose={() => {
            setSavedPhoto(false);
          }}
        >
          {/* 新增全屏背景容器 */}
          <View style={styles.modalBackground}>
            <View style={styles.modalViewStyle}>
              <Text style={styles.modalTextStyle}>
                您已保存图片
              </Text>
            </View>
          </View>
        </Modal>
    </>
);

第二步：修改样式代码 #

新增背景容器的样式，调整原有提示框样式，去掉不需要的flex比例设置：

const styles = StyleSheet.create({
  image: {
    width: 150,
    height: 100,
    borderRadius: 13,
    margin: 3,
    resizeMode: "cover",
  },
  // 新增Modal背景样式
  modalBackground: {
    flex: 1,
    // 半透明背景，不想有背景可以改成transparent
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalViewStyle: {
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20, // 左右内边距，避免文字贴边
    borderWidth: 3,
    borderColor: "red",
    height: 40,
    backgroundColor: 'white', // 给提示框加个白色背景，你可以自己调整
    borderRadius: 8 // 加圆角更美观
  },
  modalTextStyle: {
    fontWeight: "bold",
    color: "green",
    fontSize: 15,
  },
});

改完之后Modal就不会占满全屏，只会显示你设定尺寸的提示框，位置默认居中。如果需要调整提示框位置，修改modalBackground的justifyContent属性即可，比如改成flex-end就会在底部显示。

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