React native 如何在React Native中对平面列表项执行单击功能

我正在获取数据列表，我想在单击平面列表的任何项目时显示每个数据的详细信息。这里是我的代码

 <FlatList style={{paddingBottom:5}}
          data = {this.state.fetchFreelancer}
          keyExtractor={(y, z) => z.toString()}
          renderItem={({ item }) =>

          <FreelancerCategory

          imageUrifreelancer = {{uri: `${item.profile_img}`}}
          imageUrifeatured = {{uri: `${item.badge.badget_url}`}}
          featuredColor ={`${entities.decode(item.badge.badget_color)}`}
          flagimageUri= {{uri: `${item.location.flag}`}}
          freelancername={`${entities.decode(item.name)}`}
          title={`${entities.decode(item._tag_line)}`}
          rate={`${entities.decode(item._perhour_rate)}`}
          country={`${entities.decode(item.location._country)}`}
          /> 

z.toString（）}
renderItem={（{item}）=>

但是我不能在平面列表中执行onPress，有人能帮我吗？谢谢

它不起作用

<FlatList
                style={{ paddingBottom: 5 }}
                data={this.state.fetchFreelancer}
                keyExtractor={(y, z) => z.toString()}
                renderItem={({ item }) => (
                  <TouchableOpacity
                 onPress={() => navigate('DetailFreelancerScreen', {profile_id: item.profile_id})}
                //  onPress={() => alert('Item pressed')}
                  >
                    <FreelancerCategory
                      imageUrifreelancer={{ uri: `${item.profile_img}` }}
                      imageUrifeatured={{ uri: `${item.badge.badget_url}` }}
                      featuredColor={`${entities.decode(
                        item.badge.badget_color
                      )}`}
                      flagimageUri={{ uri: `${item.location.flag}` }}
                      freelancername={`${entities.decode(item.name)}`}
                      title={`${entities.decode(item._tag_line)}`}
                      rate={`${entities.decode(item._perhour_rate)}`}
                      country={`${entities.decode(item.location._country)}`}
                    />
                  </TouchableOpacity>
                )}
              />

z.toString（）}
renderItem={（{item}）=>(
导航（'DetailFreedolerScreen'，{profile\u id:item.profile\u id}）}
//onPress={（）=>alert（'Item pressed'）}
>
)}
/>

请阅读此内容。本文将帮助您正确使用

FlatList

组件。我希望它能帮助你

如果你想执行点击事件，你应该用TouchableOpacity或TouchableWithoutFeedback覆盖你的项目

<FlatList 
    style={{paddingBottom:5}}
    data = {this.state.fetchFreelancer}
    keyExtractor={(y, z) => z.toString()}
    renderItem={({ item }) => (
        <TouchableOpacity
           onPress={() => this.props.navigation.navigate('DetailFreelancerScreen', 
               {profile_id: item.profile_id})}
        >
           <FreelancerCategory
             imageUrifreelancer = {{uri: `${item.profile_img}`}}
             imageUrifeatured = {{uri: `${item.badge.badget_url}`}}
             featuredColor ={`${entities.decode(item.badge.badget_color)}`}
             flagimageUri= {{uri: `${item.location.flag}`}}
             freelancername={`${entities.decode(item.name)}`}
             title={`${entities.decode(item._tag_line)}`}
             rate={`${entities.decode(item._perhour_rate)}`}
             country={`${entities.decode(item.location._country)}`}
          /> 
       </TouchableOpacity>
      );
  />

z.toString（）}
renderItem={（{item}）=>(
this.props.navigation.navigate（'detailfreederscreen'，
{profile\u id:item.profile\u id}
>
);
/>

---

有关更多信息，请参阅RN

您可以使用

包装您的

，并向其传递一个onPress-propI-have-dot-it警报正在工作但导航器不工作您使用的导航器是什么？版本？？我不确定版本@BANID是否正确，哪个导航器？反应导航？使用this.props.Navigation.navigate，而不是navigate。我已经更新了答案，