React Native中TouchableOpacity导航异常问题排查求助

问题描述 #

我正在开发一款React Native应用，本人是JavaScript和React新手。当前代码存在以下问题：点击TaskItem组件无法切换页面，但点击Task组件会直接跳转到所有其他页面。

原代码片段 #

Task.js #

import { useNavigation } from '@react-navigation/native';
import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image, Animated } from 'react-native';
import Cerebelum  from './Cerebelum';
import Cerebrum  from './Cerebrum';
import Brainstem  from './Brainstem';
import Structure  from './Structure';
import Physiology  from './Physiology';
import { LogBox } from 'react-native';

let TheBigList = {
  Cerebrum: Cerebrum,
  Cerebelum: Cerebelum,
  Brainstem: Brainstem,
  Structure: Structure,
  Physiology: Physiology,
}

LogBox.ignoreLogs([
  'Non-serializable values were found in the navigation state',
]);

const TaskItem = ({ task, onPress }) => {
  const positionY = useRef(new Animated.Value(0)).current;

  const translateY = positionY.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -20], // Adjust the falling distance of each task
  });

  const opacity = positionY.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  return (
    <TouchableOpacity style={styles.taskItemContainer}>
      <Animated.View
        style={[
          styles.taskItem,
          {
            transform: [{ translateY }],
            opacity,
          },
        ]}
      >
        <Text style={styles.taskText}>{task}</Text>
      </Animated.View>
    </TouchableOpacity>
  );
};

const Task = ({ text, imagesrc, elem }) => {
  const [isPressed, setIsPressed] = useState(true);

  const positionY = useRef(new Animated.Value(0)).current;

  const handlePross = () => {
    setIsPressed(!isPressed);
    console.log('3');
  };

  const navigation = useNavigation();

  const handleTaskPress = (task) => {
    console.log('4');
    navigation.navigate(task, { item: TheBigList[task] });
  };

  const renderTaskList = () => {
  const taskItems = elem; // Example task items

  return taskItems.map((task, index) => (
    <TaskItem key={index} task={task} onPress={handleTaskPress(task)} />
  );
};

return (
  <TouchableOpacity onPress={handlePross}>
    <View style={styles.item}>
      <View style={styles.square}>
        <Image source={imagesrc} style={styles.square} />
      </View>
      <View style={styles.itemLeft}>
        <Text style={styles.itemText}>{text}</Text>
      </View>
      <View style={styles.circular} />
      {isPressed && <View style={styles.taskList}>{renderTaskList()}</View>}
    </TouchableOpacity>
  );
};

navigation.js #

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import Brainstem from './Brainstem';
import Cerebrum from './Cerebrum';
import Cerebelum from './Cerebelum';
import Structure from './Structure';
import Physiology from './Physiology';

const Stack = createStackNavigator();

const Navigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Cerebrum" component={Cerebrum} options={{ headerShown: true }} />
      <Stack.Screen name="Cerebelum" component={Cerebelum} options={{ headerShown: true }} />
      <Stack.Screen name="Brainstem" component={Brainstem} options={{ headerShown: true }} />
      <Stack.Screen name="Structure" component={Structure} options={{ headerShown: true }} />
      <Stack.Screen name="Physiology" component={Physiology} options={{ headerShown: true }} />
    </Stack.Navigator>
  );
};

export default Navigation;

核心问题分析 #

• TaskItem点击无响应：TaskItem里的TouchableOpacity没有绑定传入的onPress回调，点击时没有任何触发逻辑。
• Task点击直接跳转所有页面：渲染TaskItem时，直接执行了handleTaskPress(task)，而不是把它作为点击回调传递，导致组件一渲染就触发所有导航动作。
• 事件冒泡冲突：外层TouchableOpacity包裹了整个Task内容（包括展开的TaskList），点击TaskItem时会同时触发外层的折叠/展开函数，干扰导航逻辑。

修复后的Task.js代码 #

import { useNavigation } from '@react-navigation/native';
import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image, Animated } from 'react-native';
import Cerebelum  from './Cerebelum';
import Cerebrum  from './Cerebrum';
import Brainstem  from './Brainstem';
import Structure  from './Structure';
import Physiology  from './Physiology';
import { LogBox } from 'react-native';

let TheBigList = {
  Cerebrum: Cerebrum,
  Cerebelum: Cerebelum,
  Brainstem: Brainstem,
  Structure: Structure,
  Physiology: Physiology,
}

LogBox.ignoreLogs([
  'Non-serializable values were found in the navigation state',
]);

const TaskItem = ({ task, onPress }) => {
  const positionY = useRef(new Animated.Value(0)).current;

  const translateY = positionY.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -20], // Adjust the falling distance of each task
  });

  const opacity = positionY.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  // 修复：绑定onPress回调到TouchableOpacity
  return (
    <TouchableOpacity style={styles.taskItemContainer} onPress={onPress}>
      <Animated.View
        style={[
          styles.taskItem,
          {
            transform: [{ translateY }],
            opacity,
          },
        ]}
      >
        <Text style={styles.taskText}>{task}</Text>
      </Animated.View>
    </TouchableOpacity>
  );
};

const Task = ({ text, imagesrc, elem }) => {
  const [isPressed, setIsPressed] = useState(true);

  const positionY = useRef(new Animated.Value(0)).current;

  const handlePross = () => {
    setIsPressed(!isPressed);
    console.log('3');
  };

  const navigation = useNavigation();

  const handleTaskPress = (task) => {
    console.log('4');
    navigation.navigate(task, { item: TheBigList[task] });
  };

  const renderTaskList = () => {
  const taskItems = elem; // Example task items

  // 修复：传递箭头函数作为回调，避免渲染时执行
  return taskItems.map((task, index) => (
    <TaskItem key={index} task={task} onPress={() => handleTaskPress(task)} />
  ));
};

return (
  <View style={styles.item}>
    {/* 修复：将TouchableOpacity仅包裹头部区域，避免覆盖TaskList */}
    <TouchableOpacity onPress={handlePross} style={styles.taskHeader}>
      <View style={styles.square}>
        <Image source={imagesrc} style={styles.square} />
      </View>
      <View style={styles.itemLeft}>
        <Text style={styles.itemText}>{text}</Text>
      </View>
      <View style={styles.circular} />
    </TouchableOpacity>
    {isPressed && <View style={styles.taskList}>{renderTaskList()}</View>}
  </View>
);
};

// 补充样式定义（根据你的实际需求调整）
const styles = StyleSheet.create({
  item: {
    backgroundColor: '#fff',
    borderRadius: 8,
    marginVertical: 8,
    marginHorizontal: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  taskHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
  },
  square: {
    width: 40,
    height: 40,
    borderRadius: 8,
    resizeMode: 'cover',
  },
  itemLeft: {
    marginLeft: 12,
    flex: 1,
  },
  itemText: {
    fontSize: 16,
    fontWeight: '500',
  },
  circular: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#ccc',
  },
  taskList: {
    paddingLeft: 68,
    paddingBottom: 16,
  },
  taskItemContainer: {
    paddingVertical: 8,
  },
  taskText: {
    fontSize: 14,
    color: '#666',
  },
});

关键修复点说明 #

1. TaskItem绑定点击事件：给TaskItem的TouchableOpacity添加onPress={onPress}，确保点击时触发传入的导航回调。
2. 避免渲染时执行导航函数：用箭头函数() => handleTaskPress(task)包裹导航函数，这样只有点击TaskItem时才会执行导航逻辑，而不是组件渲染时就触发。
3. 拆分外层点击区域：将原来包裹整个内容的TouchableOpacity缩小到仅包含头部（图片、文字、圆形按钮），点击TaskList里的项时不会触发外层的折叠/展开逻辑，解决事件冲突。

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