React Native中TouchableWithoutFeedback与Link组件结合失效求助

你遇到的问题是因为react-router-native的Link组件默认基于TouchableHighlight实现，所以点击时会自带高亮效果。不需要额外嵌套TouchableWithoutFeedback，直接通过以下两种方式即可解决：

方法一：替换Link的底层触摸组件 #

将Link的component属性设置为TouchableWithoutFeedback，既能保留导航逻辑，又能自定义点击事件，同时去掉默认高亮：

import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";
import { Link } from "react-router-native";

const Test = () => {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
      
      <Link 
        to="/cart" 
        component={TouchableWithoutFeedback}
        onPress={handlePress}
      >
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </Link>
    </View>
  );
}

export default Test;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

方法二：手动触发导航+自定义触摸组件 #

用useNavigate钩子手动处理页面跳转，同时用TouchableWithoutFeedback包裹内容，完全自定义触摸逻辑：

import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";
import { useNavigate } from "react-router-native";

const Test = () => {
  const [count, setCount] = useState(0);
  const navigate = useNavigate();

  const handlePress = () => {
    setCount(count + 1);
    navigate("/cart");
  };

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
      
      <TouchableWithoutFeedback onPress={handlePress}>
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
}

export default Test;

// styles 代码与原示例一致

原代码失效原因 #

你之前嵌套TouchableWithoutFeedback和Link的顺序存在问题：Link本身就是一个触摸组件，内外层的触摸事件会发生冲突，导致要么导航逻辑失效，要么无法覆盖默认的高亮效果。直接替换Link的底层组件或手动处理导航是更可靠的解决方式。

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