React Native iOS端Modal遮挡ImagePicker 无法单独关闭视图问题

根因说明 #

该问题是iOS端React Native Modal的层级特性导致：iOS上RN Modal的渲染优先级高于系统原生弹出的图片选择UI，所以会出现遮挡；Android端Modal层级逻辑不同，因此运行正常。你之前同步执行关闭Modal和调用图片选择器的逻辑会因为Modal关闭动画还未完成，就触发了图片选择器弹出，所以依然会被遮挡甚至连带关闭。

修复步骤 #

1. 调整图片选择触发逻辑 #

先关闭Modal，等待Modal关闭动画完成后再调用图片选择器，iOS端Modal默认关闭动画时长为300ms，设置300-500ms的延时即可规避层级冲突。
修改后的_pickImage代码如下：

const _pickImage = async () => {
  // 先关闭Modal
  this.setState({ isModal5Visible: false });
  // 等待Modal关闭动画完成后再弹出图片选择器
  setTimeout(async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    // 后续处理图片选择结果的逻辑写在这里
    // 如果选择完成后需要重新打开Modal，可以在此处再加 this.setState({ isModal5Visible: true })
  }, 350);
};

2. 修正Modal语法问题 #

你提供的Modal代码存在属性放置错误的问题，所有属性需要写在Modal标签的尖括号内，修正后的参考代码：

<Modal
  isVisible={this.state.isModal5Visible}
  onBackdropPress={() => this.setState({ isModal5Visible: false })}
>
  <View style={{flex:1}}>
    <Button  primary style={{flexDirection: 'row', alignItems: 'center', justifyContent:'flex-start'}}
                    onPress={this._pickImage}
    >
      <Icon name='ios-book' />
      <Text style={ Platform.OS === 'ios' ? {fontSize:16} : {fontSize:12,paddingLeft:4} }>Gallery</Text>
    </Button>
  </View>
</Modal>

可选优化方案 #

如果不想关闭Modal，可以给Modal添加iOS专属的层级属性，针对react-native-modal组件添加statusBarTranslucent={true}，同时设置presentationStyle="overFullScreen"即可解决遮挡问题，不需要调整_pickImage逻辑：

<Modal
  isVisible={this.state.isModal5Visible}
  onBackdropPress={() => this.setState({ isModal5Visible: false })}
  // 新增以下两个iOS专属属性
  presentationStyle="overFullScreen"
  statusBarTranslucent={true}
>
  {/* 原有内容不变 */}
</Modal>

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