javascript - 在嵌套的TouchableOpacity中不起作用

嗨，我的自定义组件就是这样包裹在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函数是错误的。

但是我尝试了没有父组件的情况，它正在工作。
我想念什么？

最佳答案

是我的错问题不在于代码或组件。
我使用@ ui-kitten / components中的Card组件，它在后台实现了TouchableOpacity。所以我不需要再用TouchableOpacity换行了。

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