不能在嵌套的 TouchableOpacity 中工作答案

【问题标题】：Not working onPress in nested TouchableOpacity不能在嵌套的 TouchableOpacity 中工作
【发布时间】：2020-02-27 18:22:49
【问题描述】：

您好，我的自定义组件是这样包裹在 TouchableOpacity 中的。


  const profileOnClick = () => {                                                                                                                                                                                                                                                        
    console.log('Card Clicked!');   
  };

  export const InfluencerCard = props => {

    const {influencer, navigation} = props;
    return (
      <TouchableOpacity onPress={() => profileOnClick()}>
        <Card>
          <Text>
            {influencer.user.name}
          </Text>
          <Text>
            {influencer.tags[0].name}
          </Text>
        </Card>
      </TouchableOpacity>
    );
  };

在主屏幕中


        <ScrollView>
          {data.categoriesForHome.map(category => (
            <Layout key={category.id}>
              <Text>
                {category.name}({category.total})
              </Text>
              <ScrollView horizontal={true}>
                {category.influencerProfiles.map(profile => (
                  <View key={profile.id}>
                    <InfluencerCard influencer={profile} />
                  </View>
                ))}
              </ScrollView>
            </Layout>
          ))}
        </ScrollView>

当我单击自定义组件InfluencerCard 时，它什么也没做。我想知道这是因为该组件在其他组件中，所以父组件阻止单击自定义组件。或者调用 onPress 函数是错误的。

但我尝试不使用父组件，它可以工作。我错过了什么？

【问题讨论】：

标签： javascript react-native jsx touchableopacity

【解决方案1】：

这是我的错。问题不在于代码或组件。我使用来自 @ui-kitten/components 的 Card 组件，它在幕后实现了 TouchableOpacity。所以我不需要再用 TouchableOpacity 包装了。所以就这样做

<Card onPress={() => profileClick()}></Card>

【讨论】：