Mit React Native arbeiten und Probleme mit der FlatList-Komponente haben. Dies ist meine FlatList
<FlatList
data={this.state._data}
renderItem={() => this.renderItem()}
refreshControl={
<RefreshControl
onRefresh={() => this.handleRefresh}
refreshing={this.state.refreshing}
/>
}
/>
Dies ist meine renderItem-Funktion:
renderItem({item, index}) {
return (
<View style={{marginTop: 10, marginHorizontal: 10, paddingLeft:
10}}>
<ListItem
roundAvatar
title={`${item.itemName}`}
subtitle={`${item.amount}`}
avatar={require('../../../images/logo.png')}
/>
<View
style={{
paddingBottom: 10,
paddingTop: 10,
display: 'flex',
flexDirection: "row",
justifyContent: "space-around",
alignContent: "center"
}}
>
<View style={{ flexDirection: "row", alignContent:
"center", width:"45%"}}>
<Button
block
small
// disabled={this.state.acceptButtonGray}
style=
{this.state.acceptButtonGray ? ({
backgroundColor: 'gray',
width: "100%"
}) : ({backgroundColor: "#369ecd",
width: "100%"
})}
onPress={() =>
this.setState({
modalVisible: true,
// acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
acceptOffer: true,
})
}
>
<Text>
Accept
</Text>
</Button>
</View>
</View>
</View>
);
}
this.setState im onPress in der Schaltfläche sollte einen Modal sichtbar machen und "AcceptOffer" auf "true" setzen. Modal öffnet sich, Benutzer bestätigt sein Angebot. Der Angebotsknopf, der diesen Modal jetzt geöffnet hat, sollte grau sein und noch besser deaktiviert sein.
Ich übergebe meine RenderItem-Funktion wie oben gezeigt
TypeError: Cannot read property 'item' of undefined.
So übergeben Sie meine RenderItem-Funktion:
renderItem={this.renderItem}
Ich erhalte diesen Fehler:
_this2.setState is not a function
Die FlatList-Komponente ist sicherlich für einen Teil meines Problems verantwortlich und auch dafür, wie und wo ich this.setState nenne. In meinem Beitrag wird nur ein Button angezeigt, aber es gibt zwei, einen zum Annehmen, einen zum Ablehnen. Würden zwei Modale etwas ändern?
Die FlatList zeigt meine ListItem-Komponenten mit Leichtigkeit an, bis ich this.setState in den Schaltflächen in der Ansicht aufrufen möchte, die diese ListItems enthält.
Die Schaltfläche zum Schließen von Modal nimmt this.state.acceptOffer und wenn true, setzt this.state.acceptButtonGray auf true. Sollte diese Logik an einer anderen Stelle sein?
Gibt es eine andere Möglichkeit, ein Modal zu öffnen und die Tastenfarbe zu ändern, ohne den Komponentenstatus zu verwenden? Will reagieren diese Knöpfe innerhalb einer TouchableOpacity?
Ich freue mich über jede Hilfe.
sie sollten eine renderItem-Funktion wie diese schreiben
renderItem = ({item, index}) => {
// return here
}
Eine Vermutung, haben Sie versucht, zu renderItem={this.renderItem.bind(this)}
zu wechseln?
Sie müssen bind(this,item)
verwenden oder eine Funktion wie (item)=>
ändern.