React Native中Android端StackNavigator跳转后如何屏蔽前屏可触摸元素？

以下是针对这个Android端特有问题的几种实用解决方案：

• 给页面根容器设置不透明背景
  Android平台下，React Navigation的栈页面默认背景是透明的，这会导致下层页面的可触摸元素穿透到上层页面。给每个栈页面的根View设置不透明背景色即可阻断穿透：

  // 示例：跳转后的页面组件
  export default function NextScreen() {
    return (
      <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
        {/* 页面内容 */}
      </View>
    );
  }
  

• 利用导航事件控制前页交互状态
  通过监听页面的focus和blur事件，在页面被压入栈底时禁用其交互能力，避免触摸穿透：

  import { useState, useEffect } from 'react';
  import { View, Button } from 'react-native';
  
  export default function PreviousScreen({ navigation }) {
    const [isPageActive, setIsPageActive] = useState(true);
  
    useEffect(() => {
      const blurListener = navigation.addListener('blur', () => {
        setIsPageActive(false);
      });
      const focusListener = navigation.addListener('focus', () => {
        setIsPageActive(true);
      });
  
      // 清理监听
      return () => {
        blurListener();
        focusListener();
      };
    }, [navigation]);
  
    return (
      <View style={{ flex: 1 }} pointerEvents={isPageActive ? 'auto' : 'none'}>
        <Button 
          title="跳转到下一页" 
          onPress={() => navigation.navigate('NextScreen')}
          disabled={!isPageActive}
        />
      </View>
    );
  }
  

• 全局配置栈页面样式
  在StackNavigator的全局配置中统一设置页面背景和触摸拦截，避免逐个页面修改：

  import { createStackNavigator } from '@react-navigation/stack';
  
  const Stack = createStackNavigator();
  
  export default function AppStack() {
    return (
      <Stack.Navigator
        screenOptions={{
          cardStyle: {
            backgroundColor: '#ffffff',
            pointerEvents: 'auto'
          }
        }}
      >
        <Stack.Screen name="Previous" component={PreviousScreen} />
        <Stack.Screen name="Next" component={NextScreen} />
      </Stack.Navigator>
    );
  }
  

• 排查嵌套导航的层级问题
  如果页面内包含嵌套导航（如TabNavigator），确保嵌套导航的根容器同样设置了不透明背景和正确的pointerEvents属性，防止下层元素的触摸事件穿透。

• 升级React Navigation版本
  部分旧版本的React Navigation在Android端存在触摸穿透的已知bug，升级到@react-navigation/native和@react-navigation/stack的最新稳定版本，可能直接修复该问题。

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