React Navigation中TouchableOpacity onPress失效，如何跳转SplashScreen2

一、onPress事件失效的排查与修复 #

• 检查点击区域：确认TouchableOpacity的style是否设置了有效宽高，避免因尺寸为0导致无法触发点击。可临时添加背景色测试点击范围：

  style={[styles.buttonText, { backgroundColor: 'rgba(0,0,0,0.1)' }]}
  

• 排查组件遮挡：检查父组件或同级组件是否有绝对定位、z-index更高的元素覆盖在TouchableOpacity上方，移除或调整层级即可。
• 检查pointerEvents属性：确保TouchableOpacity及其父组件未设置pointerEvents: 'none'，该属性会直接禁用所有交互事件。
• 确认navigation对象有效性：函数组件需通过useNavigation钩子获取navigation；类组件要确保从props中正确接收navigation对象，避免因未拿到navigation导致事件逻辑无法执行。

二、正确实现跳转到SplashScreen2页面 #

React Navigation中不存在navigateToScreen方法，标准跳转方法为navigation.navigate，修改后的代码示例如下：

函数组件写法 #

import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const YourComponent = () => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={[styles.buttonText]}
      onPress={() => navigation.navigate("SplashScreen2")}
    >
      <Text style={[styles.buttonContent, { color: "white" }]}>
        Next
      </Text>
    </TouchableOpacity>
  );
};

类组件写法 #

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

class YourComponent extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <TouchableOpacity
        style={[styles.buttonText]}
        onPress={() => navigation.navigate("SplashScreen2")}
      >
        <Text style={[styles.buttonContent, { color: "white" }]}>
          Next
        </Text>
      </TouchableOpacity>
    );
  }
}

另外需确保SplashScreen2已在导航栈中注册，示例配置如下：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => (
  <Stack.Navigator>
    {/* 其他已注册页面 */}
    <Stack.Screen name="SplashScreen2" component={SplashScreen2} />
  </Stack.Navigator>
);

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