React Native Function 外部 Class 將項目傳遞給 Function 內部

Question

我的默認組件中有一個平面列表，我想使用 Touchables 執行對項目的點擊，當項目被觸摸時，它應該獲取一個名為“Source”的項目並將其傳遞給另一個名為“deleteImage”的 function。 現在的問題是我的 RenderItem（稱為 ItemAdImages）在主組件之外，但 deleteImage 在組件內部，因此它無法將“Source”傳遞給 deleteImage。 我的渲染項代碼：

   Export Default Class ... Extends Component{
     render(){

return(

    <SafeAreaView style={{
                            marginBottom: 10, flex: 1,
                            alignContent: 'center'
                        }}>
                            <FlatList
                                data={this.state.avatarsArray}
                                renderItem={({item}) => <ItemAdImages
                                    source={item.source}
                                    data={item.data}
                                />}
                                numColumns={3}
                                keyExtractor={(item) => item.data}
                                contentContainerStyle={{margin: 0}}
                                extraData={this.state.itemImagesListRefresh}
                            />
                        </SafeAreaView>


             )//return
            }//render


    deleteImage(imageSource){

            console.log("image source is = " + imageSource)

            for(let i = 0; i < this.state.avatarsArray.length; i++){
                if (this.state.avatarsArray[i]['source'] === imageSource){
                    this.state.avatarsArray.splice(i, 1);
                    this.setState({itemImagesListRefresh: !this.state.itemImagesListRefresh})
                    console.log(this.state.avatarsArray)
                }
                else {
                    console.log(this.state.avatarsArray[i] + " Not It")
                }
            }

        }//deleteImage

     }//main component

和我的renderItem function 在主要組件之外：

function ItemAdImages({source, data, id, state}) {

    return (

        <Container style={{height: 45, width: 90, backgroundColor: '#EEEEEE',
        margin: 10}}>
            <Content>
                <TouchableOpacity onPress={() => this.deleteImage(source)}>
                    <View >
                        <Image
                            //source= {{uri: "content://media/external/images/media/29"}}
                            source= {{uri: source}}
                            //source= {{uri : this.state.avatarsArray[0].source}}
                            //source= {{uri : this.state.avatarsArray[0].source}}
                            style={{width: 90, height: 45,
                                backgroundColor: '#FF9900'}} />
                    </View>
                </TouchableOpacity>
            </Content>
        </Container>

    ) }

錯誤是：

Answer 1

您應該將刪除圖像 function 作為參數傳遞給項目組件

 renderItem={({item}) => <ItemAdImages
                                    source={item.source}
                                    data={item.data}
                                    deleteImage={this.deleteImage}
                                />}

並像任何其他道具一樣訪問它

function ItemAdImages（{來源，數據，ID，state，deleteImage}）{

return (

    <Container style={{height: 45, width: 90, backgroundColor: '#EEEEEE',
    margin: 10}}>
        <Content>
            <TouchableOpacity onPress={() => deleteImage(source)}>
                <View >
                    <Image
                        //source= {{uri: "content://media/external/images/media/29"}}
                        source= {{uri: source}}
                        //source= {{uri : this.state.avatarsArray[0].source}}
                        //source= {{uri : this.state.avatarsArray[0].source}}
                        style={{width: 90, height: 45,
                            backgroundColor: '#FF9900'}} />
                </View>
            </TouchableOpacity>
        </Content>
    </Container>

) }