webentwicklung-frage-antwort-db.com.de

Native Flatlist-RenderItem reagieren

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.

3

sie sollten eine renderItem-Funktion wie diese schreiben

renderItem = ({item, index}) => {
 // return here
}
5
Shubham

Eine Vermutung, haben Sie versucht, zu renderItem={this.renderItem.bind(this)} zu wechseln?

2

Sie müssen bind(this,item) verwenden oder eine Funktion wie (item)=> ändern.

0
Amin Noura