React Native中如何让自定义<View>容器可点击并跳转到其他页面

你之前使用Pressable、TouchableOpacity未生效的核心原因是：代码中给Text、Image组件设置了left:195、left:200的相对偏移，导致实际渲染的文字和图标超出了父容器的边界，可点击组件的触发区域没有覆盖到可见内容，因此点击无响应。

修正后的代码如下（以React Navigation路由方案为例）：

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

// 组件内部逻辑
const CustomHeader = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
      <Text style={styles.headerfont}>Categories</Text>
      {/* 用TouchableOpacity包裹整段可点击内容 */}
      <TouchableOpacity 
        onPress={() => navigation.navigate('Page2')} // 替换Page2为你的目标页面路由名
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          paddingHorizontal: 10,
          paddingVertical: 5, // 内边距扩大点击热区，提升点击体验
        }}>
        <Text style={{ fontSize: 15 }}>View More</Text>
        <Image
          style={{ marginLeft: 5, height: 23, width: 23 }}
          source={require('../img/agni/viewmore.png')}
        />
      </TouchableOpacity>
    </View>
  );
}

核心调整点 #

• 外层父View新增justifyContent: 'space-between'属性，自动让左侧标题和右侧的View More区域左右分布，不需要再通过left偏移调整位置，避免内容超出父容器导致点击失效
• 整段需要响应点击的View More+图标区域统一用TouchableOpacity包裹，绑定跳转逻辑
• 若你使用其他路由方案，直接替换onPress内的跳转逻辑即可

效果示意图：

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