React Native自定义组件嵌套Touchable时 onPress 失效问题求助

我来帮你分析这个问题，你遇到的情况其实很常见——当用自定义组件（View包裹Text）作为TouchableWithoutFeedback的子组件时，触摸事件没有正确触发，而原生Text组件却能正常工作。这是因为Text本身是原生可触摸元素，而自定义的View组件默认不会处理触摸事件，导致TouchableWithoutFeedback的点击区域没有被正确识别。

下面是具体的解决思路和代码修改方案：

方案一：将触摸逻辑封装到自定义组件内部 #

最可靠的方式是把TouchableWithoutFeedback直接集成到你的TopNavigationButtonUnchosen组件里，让组件本身具备触摸能力，而不是在外部包裹。这样能确保触摸事件被正确捕获。

修改TopNavigationButtonUnchosen组件： #

import React from 'react';
import {View, Text, StyleSheet, Platform, TouchableWithoutFeedback} from 'react-native';

const TopNavigationButtonUnchosen = (props) => {
  return (
    <TouchableWithoutFeedback onPress={props.onPress}>
      <View style={styles.navigationBackgroundSelected}>
        <Text style={styles.navigationBackgroundSelectedText}>{props.children}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  navigationBackgroundSelected:{
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'flex-start',
    borderRadius: 16,
  },
  navigationBackgroundSelectedText:{
    paddingTop:5,
    paddingBottom:5,
    paddingLeft:15,
    paddingRight:15,
    fontSize:17,
    color:'#9AA5B1',
    ...Platform.select({ ios: { fontFamily: "OpenSans-Bold" }, android: { fontFamily: "opensansBold" } }),
  }
})

export {TopNavigationButtonUnchosen} ;

修改App组件的renderItem方法： #

现在不需要在外部再包裹TouchableWithoutFeedback了，直接给自定义组件传递onPress回调：

renderItem = ({item}) => {
  if (item.key == this.state.chosenTopNavigation) {
    return (
      <TouchableWithoutFeedback onPress={() => this.setState({chosenTopNavigation: item.key})} >
        <TopNavigationButton > {item.key} </TopNavigationButton>
      </TouchableWithoutFeedback>
    )
  } else {
    // 直接传递onPress到自定义组件
    return (
      <TopNavigationButtonUnchosen onPress={() => this.setState({chosenTopNavigation: item.key})}>
        {item.key}
      </TopNavigationButtonUnchosen>
    )
  }
}

方案二：确保自定义组件的触摸区域可识别（备选） #

如果你不想修改自定义组件的结构，也可以尝试给自定义组件的View添加accessible={true}和pointerEvents="box-only"属性，确保触摸事件能被外部的TouchableWithoutFeedback捕获：

// 在TopNavigationButtonUnchosen的View中添加属性
<View 
  style={styles.navigationBackgroundSelected}
  accessible={true}
  pointerEvents="box-only"
>
  <Text style={styles.navigationBackgroundSelectedText}>{props.children}</Text>
</View>

不过方案一更推荐，因为它让组件的职责更清晰，也避免了外部包裹带来的潜在问题。

另外，你提到怀疑和this绑定有关，但看你的代码，renderItem.bind(this)已经正确绑定了上下文，而且用箭头函数定义的renderItem本身也会自动绑定this，所以这个不是问题所在。

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