Question

当有人单击Flatlist项目时，我的onPress处理程序不起作用。

此问题的视频 https://u.pcloud.link/publink/show?code=XZWGOUkZmDLPeKQOQJJzxnqFB8Q21X3acT7k

代码如下：

import React, { useState, useEffect } from 'react';

import { View, Text, Image, FlatList, ActivityIndicator } from 'react-native';
 
 

import { TouchableNativeFeedback } from 'react-native-gesture-handler';

import axios from 'axios';
 
export default function _AjaxApp() {

    const [postList, setPostList] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [isLoading, setIsLoading] = useState(false);


    const loadData = (append = false) => {
        let url = "https://edristi.in/wp-json/wp/v2/posts?per_page=20&page=" + currentPage;
        setIsLoading(true);
        setCurrentPage(currentPage + 1);
        axios.get(url).then((r) => {
            if (append) {
                setPostList(postList.concat(r.data));
            } else {
                setPostList(r.data);
            }
            setIsLoading(false);
        }).catch((e) => {
            console.log(e);
        });
    }

    useEffect(() => {
        loadData();
    }, [])

    let Loader = <></>
    if (isLoading) {
        Loader = <ActivityIndicator></ActivityIndicator>
    }

    return (
        <View>
          <View style={{padding:20, backgroundColor:"#4342fe"}}>
          <Text style={{color:"white"}}>Edristi App</Text>
          </View>

            <FlatList
                data={postList}
                renderItem={({ item, index, separators }) => <PostCard  postList={postList} {...item} index={index} />}
                keyExtractor={r => r.id + "-" + Math.random().toString()}
                removeClippedSubviews={true}
                maxToRenderPerBatch={2}
                ListFooterComponent={Loader}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    loadData(true);
                }}
            />


        </View>
    );
}



class PostCard extends React.PureComponent {


    onPressHandler() {
        console.log("Clicked");
        alert("Clicked");
 
    }



    render() {

        let image = <></>
        if (this.props.jetpack_featured_media_url.trim() !== "") {
            image = <Image style={{ flex: 1 }} source={{
                //uri: this.props.featuredimage,
                uri: this.props.jetpack_featured_media_url,
            }} />
        }
        //  console.log(this.props.jetpack_featured_media_url);


        return <TouchableNativeFeedback onPress={()=>{
          this.onPressHandler();
        }}>

            <View style={{ margin: 10 }}>
               
                    <Text style={{ fontSize: 17, lineHeight: 23, fontWeight: "600" }}>{ this.props.title.rendered}</Text>
                    
              
            </View></TouchableNativeFeedback>

 
    }
}

Answer 1

尝试从“ react-native”而不是“ react-native-gesture-handler”导入“ TouchableNativeFeedback”。

onPress在React Native Flatlist中不起作用

1 个答案: