在我的平面列表网格中添加 onPress 函数时出错

Question

我在为平面列表网格添加按下功能时出错。当我按下或单击成员列表容器中的图片时，我想从成员列表屏幕导航到成员详细信息屏幕。当我按下或单击成员列表容器中的上传按钮时，我还想从成员列表屏幕导航到上传收据屏幕。下面是我的 code.Do 帮助我，因为我对 React Native 还是个新手。

Memberlist.js Member Details Image

import React from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { SearchContainer, SearchInput, SearchIcon, SearchIconContainer, MemberListImage} from './styles';
import { FontAwesome5 } from '@expo/vector-icons';
import Member from './Member';

export const SearchBarCell = () => {
    const [text, onChangeText] = React.useState(null);
    return (
        <SearchContainer>
            <SearchInput
                onChangeText={onChangeText}
                value={text}
                placeholder="Search"
            />
            <SearchIconContainer activeOpacity={0.8} onPress={undefined}>
                <SearchIcon name="search"/>
            </SearchIconContainer>
        </SearchContainer>
    
    );
};


export const MemberCell = ({navigation}) => {
    const StaticMemberListImage = "https://media.istockphoto.com/vectors/three-people-curved-teamwork-logo-vector-id1363080708?b=1&k=20&m=1363080708&s=170667a&w=0&h=HG6M1JLupChxFQvl8mzUCLCkKWxNwa09RscKJRWTfoU="
    const StaticMemberListImage1 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/277536553_4926823574070611_1982637994984559070_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=110&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=XepHa0zDLokAX_CGPxz&_nc_ht=scontent.fkul13-1.fna&oh=00_AT8-ajKxUdWkKKhfTMlGVZHnDDboXBTiXA1k-4uffh53FA&oe=628303D8"
    const StaticMemberListImage2 = "https://cdn3.f-cdn.com/contestentries/1771882/42695517/5ec3817a4257a_thumb900.jpg"
    const StaticMemberListImage3 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/116880515_187714399437397_6195609452015735631_n.jpg?_nc_cat=105&ccb=1-6&_nc_sid=09cbfe&_nc_ohc=SFOqJafY0qYAX83mUrQ&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-aRCE81LEG-3iYA7bNPQA6ifu_4ObgAjqVooB4i0MSBg&oe=62A3D80D"
    const StaticMemberListImage4 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/175052927_271800581342609_273555569106690317_n.png?_nc_cat=104&ccb=1-6&_nc_sid=174925&_nc_ohc=18UXeZc859gAX_jrq4p&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-p88uwdCZTnMPRQL4b6_y4CG2PFBEFiWUgkzKlArrfIw&oe=62A212F8"
    const StaticMemberListImage5 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/276260909_298231979107455_7181712052572521945_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=100&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=xFvdoZ0pZiMAX9vrQ7b&_nc_ht=scontent.fkul13-1.fna&oh=00_AT9lNiryIc68GvPNDp7W11rRXhFj1y0H-oE0NYmniUknPQ&oe=6282AD36"

    const members = [
    { receipt: "Receipt pts: RM1 = 3.00pts", membername: "Triple R Rewards Resource" , memberImage: StaticMemberListImage, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Gwen Bridal Makeup", memberImage: StaticMemberListImage1, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "KV Physiotheraphy", memberImage: StaticMemberListImage2, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 5.00pts", membername: "LDSV Ventura Enterprise", memberImage: StaticMemberListImage3, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "May Kuen Heals", memberImage: StaticMemberListImage4, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Amarjit Sran Trading", memberImage: StaticMemberListImage5, receiptUpload: "Upload receipt"},
];
    return (
        <FlatList 
        numColumns={2}
        data={members}
        listKey={(item, index) => index.toString()}
        keyExtractor={(item, index) => index.toString()}
        renderItem={ ( { item } ) => (<Member member={item}/>)}>
        </FlatList>
    );

}

MemberDetails.js Member Details Image

import React from 'react';
import { UploadReceiptContainer , UploadInput, UploadIconContainer, UploadReceiptIcon1} from './styles';
import MemberInformation from './MemberInfo';
import MemberSocialLink from './MemberSocialMedia';
import CompanyInformation from './CompanyInfo';
import Portfolio from './CompanyPortfolio';
import { FlatList, Text, View } from 'react-native';

export const MemberUploadCell = () => {
    return (
        <UploadReceiptContainer>
        <UploadIconContainer>
        <UploadReceiptIcon1 name="receipt"/>
            <UploadInput>Upload Receipt
            </UploadInput>
            </UploadIconContainer>
        </UploadReceiptContainer>
    );
}

export const MemberInfo = () => {
    const StaticMemberListImage = "https://media.istockphoto.com/vectors/three-people-curved-teamwork-logo-vector-id1363080708?b=1&k=20&m=1363080708&s=170667a&w=0&h=HG6M1JLupChxFQvl8mzUCLCkKWxNwa09RscKJRWTfoU="
    
    const MemberInfo1 = [
        { title: "Triple R Rewards Resources", address: "24A, Jalan BP 6/6 Bandar Bukit Puchong Puchong 47100 Selangor Malaysia", memberdetailImage: StaticMemberListImage, picname: "PIC Name: Rajiv Rathakrishnan", emailaddress: "Email: rajiv.rathakrishnan@gmail.com", contactnumber: "Contact: 0125787414"}

    ];

    return (
        <FlatList 
        data={MemberInfo1}
        keyExtractor={(item, index) => index.toString()}
        listKey={(item, index) => index.toString()}
        renderItem={ ( { item } ) => (<MemberInformation memberinformation={item}/>)}>
        </FlatList>
    );

}

UploadReceipt.js Upload Receipt Image

import React from 'react';
import {GrayScrollView, EventTitle} from './../components/styles';
import {ReceiptUploadConAlign, ReceiptUploadCon, UploadTitle, NameCompany, NameCompany1, ReceiptNumber, ReceiptNumberContainer, ReceiptNumberInput, DateReceipt, DateReceiptContainer, DateReceiptInput, AmountTotal, AmountTotalContainer, AmountTotalInput, ReceiptAttachment, ReceiptAttachment1, ReceiptAttachmentContainer, ReceiptAttachmentInput, BrowseContainer, FolderIcon, BrowseTitle, SubmitReceiptContainer, SubmitTitle, ResetReceiptContainer, ResetTitle, SubmitReceiptContainerAlign} from '../components/styles';
import { HeaderBar2 } from '../components/HeaderBar';


const UploadReceipt1 = () => {
    const [text, onChangeText] = React.useState(null);
    const [number, onChangeNumber] = React.useState(null);
    return (
        <GrayScrollView contentContainerStyle={{justifyContent: 'center'}}>
        <HeaderBar2/>
            <EventTitle> Upload Receipt </EventTitle>
            <ReceiptUploadConAlign>
            <ReceiptUploadCon>
                <UploadTitle> Upload Receipt </UploadTitle>
                <NameCompany> Member Company Name </NameCompany>
                <NameCompany1> Triple R Rewards Resources </NameCompany1>
                <ReceiptNumber> Receipt No </ReceiptNumber>
                <ReceiptNumberContainer>
                <ReceiptNumberInput
                    onChangeText={onChangeText}
                    value={text}
                    placeholder="ER586952"
                />
                </ReceiptNumberContainer>
                <DateReceipt> Date of Receipt</DateReceipt>
                <DateReceiptContainer>
                <DateReceiptInput
                    onChangeText={onChangeText}
                    value={text}
                    placeholder="dd/mm/yy"
                />
                </DateReceiptContainer>
                <AmountTotal> Receipt Total Amount </AmountTotal>
                <AmountTotalContainer>
                <AmountTotalInput
                    onChangeText={onChangeNumber}
                    value={number}
                    placeholder="0.00"
                    keyboardType="numeric"
                />
                </AmountTotalContainer>
                <ReceiptAttachment>Attach Receipt file size</ReceiptAttachment>
                <ReceiptAttachment1>1MB and PNG, JPEG (MAXIMUM 4 IMAGES SHOWING DIFFERENT WALL ANGLE)</ReceiptAttachment1>
                <ReceiptAttachmentContainer>
                <ReceiptAttachmentInput
                    onChangeText={onChangeText}
                    value={text}
                    placeholder="Select file..."
                />
                <BrowseContainer>
                    <FolderIcon name="folder-outline"/>
                    <BrowseTitle>Browse</BrowseTitle>
                </BrowseContainer>
                </ReceiptAttachmentContainer>
                <SubmitReceiptContainerAlign>
                <SubmitReceiptContainer>
                <SubmitTitle>Submit
                </SubmitTitle>
                </SubmitReceiptContainer>
                <ResetReceiptContainer>
                    <ResetTitle>Reset
                    </ResetTitle>
                </ResetReceiptContainer>
                </SubmitReceiptContainerAlign>
            </ReceiptUploadCon>
            </ReceiptUploadConAlign>
        </GrayScrollView>
    );
}

export default UploadReceipt1;

Answer 1

首先，您必须使用导航并使用导航注册所有屏幕（如果您还没有完成）。您可以使用这两个包：

@react-navigation/native

@react-navigation/stack

使用导航方法导航到特定屏幕。例如：navigation.navigate('Detail')

检查这个Demo它会有帮助。

在我的平面列表网格中添加 onPress 函数时出错

Having Error on adding onPress function in my flatlist grid

reactjs

react-native

react-native-flatlist

react-flatlist