Не работает на Press во вложенном TouchableOpacity - PullRequest
0 голосов
/ 27 февраля 2020

Привет, мой пользовательский компонент обернут в 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 неправильный.

Но я пытался без родительского компонента, он работал. Чего мне не хватает?

1 Ответ

1 голос
/ 28 февраля 2020

Это была моя ошибка. Проблема была не в коде или компонентах. Я использую компонент Card из @ ui-kitten / components, и он реализует TouchableOpacity за сценой. Поэтому мне не нужно снова оборачивать TouchableOpacity. Просто сделайте

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