Expo React Native Android栈导航下屏幕可被点击的异常问题求助

嘿，这个问题我之前开发Expo应用时也碰到过，简直让人摸不着头脑！大概率是当前栈页面没完全覆盖底层页面或者底层页面的可交互元素没被正确禁用导致的，给你几个实用的排查和解决方向：

• 确保当前页面全屏且不透明
  很多时候这个Bug的根源是新页面的最外层容器没占满整个屏幕，或者背景是透明的，导致底层页面的元素“透”了出来。给新页面的根View加上这些样式试试：

  style={{
    flex: 1,
    backgroundColor: '#ffffff', // 设置和页面匹配的不透明背景色
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  }}
  

  这样就能完全覆盖住底层页面，避免点击穿透。

• 禁用底层页面的可交互元素
  你的情况是Home页面的标签栏在新页面推入后还能被点击，那可以在Home页面里监听导航焦点状态，当页面不在栈顶时禁用这些标签按钮：

  import { useIsFocused } from '@react-navigation/native';
  
  function HomeScreen() {
    const isFocused = useIsFocused();
  
    return (
      // ...你的页面结构
      <TouchableOpacity 
        disabled={!isFocused} 
        onPress={() => navigation.navigate('Tab4')}
      >
        {/* 第四个标签的内容 */}
      </TouchableOpacity>
    );
  }
  

  useIsFocused会返回当前页面是否处于栈顶焦点状态，当页面被推入新页面后，isFocused会变成false，标签按钮就会被禁用，不会响应点击了。

• 拦截当前页面的空白区域点击
  如果当前页面有ScrollView、FlatList这类组件，它们的空白区域默认不会拦截点击，会透传到底层页面。这时候可以给页面最外层套一个TouchableWithoutFeedback来拦截所有空白区域的点击：

  import { TouchableWithoutFeedback, View } from 'react-native';
  
  function NewScreen() {
    return (
      <TouchableWithoutFeedback onPress={() => {}}>
        <View style={{ flex: 1 }}>
          {/* 你的页面内容，包括ScrollView、FlatList等 */}
        </View>
      </TouchableWithoutFeedback>
    );
  }
  

  这样不管点击页面哪个空白区域，都会被这个组件拦截，不会触发底层页面的点击事件。

• 排查导航过渡动画的影响
  有时候Expo的栈导航过渡动画会导致短暂的点击穿透，你可以先关闭动画测试一下：

  navigation.navigate('YourNewScreen', {}, {
    animationEnabled: false,
  });
  

  如果关闭动画后问题消失，那就是过渡期间的底层元素可点击问题，这时候可以给新页面加一个初始的全屏遮罩层，等动画结束后再移除遮罩。

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