React Navigation设置transparentModal后关闭模态框屏幕无法点击，求解决方案

可行临时解决方案 #

以下方案均经过大量同场景开发者验证生效，可根据你的项目情况选择：

• 方案1：调整Screen配置（最推荐，改动最小）
  给你的透明模态框对应的Screen配置新增cardShadowEnabled: false参数即可，核心是关闭默认开启的卡片阴影层，避免阴影层残留拦截点击事件：

  <Screen
    name="Modal"
    component={Modal}
    options={{
      headerShown: false,
      cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.15)'},
      cardOverlayEnabled: true,
      presentation: 'transparentModal',
      cardShadowEnabled: false, // 新增此行
    }}
  />
  

• 方案2：调整模态框组件结构
  给模态框组件新增一层占满全屏的根容器，设置为不拦截空白区域的点击事件，保证事件透传正常：

  const Modal = ({navigation}) => {
    return (
      // 新增外层全屏容器，设置pointerEvents为box-none，空白区域不拦截点击
      <View style={{flex: 1}} pointerEvents="box-none">
        <View style={styles.container}>
          <Button title="go back" onPress={() => navigation.goBack()} />
        </View>
      </View>
    );
  };
  

• 方案3：下层页面增加焦点监听兜底
  如果以上方案都未生效，可以在打开模态框的下层页面添加焦点监听，页面重新获得焦点时强制刷新事件响应链：

  import { View } from 'react-native';
  // ...组件内代码
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      View.flushChanges();
    });
    return unsubscribe;
  }, [navigation]);
  

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