wake-up-neo.com

React-native: Wie werden FlatList-Elemente verpackt?

Ich habe eine Liste von Begriffen, die von einer Abfrage zurückgegeben werden. Jedes ist ein einzelnes Wort. Momentan rendert meine FlatList jedes Wort in eine Schaltfläche in derselben Zeile (horizontal = {true}). Ich möchte, dass die Schaltflächen wie normaler Text umgebrochen werden. Aber ich möchte die Spaltenfunktion auf keinen Fall verwenden, da dies nicht so natürlich aussehen würde. Ist dies möglicherweise ein schlechter Anwendungsfall für FlatList? Gibt es noch andere Komponenten, die ich verwenden könnte?

const styles = StyleSheet.create({
  flatlist: {
    flexWrap: 'wrap'
  },
  content: {
    alignItems: 'flex-start'
  }})

render() {

    return (
      <Content>
        <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
          <Item>
            <Icon name="ios-search" />
            <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter Word"/>
            <Icon name="ios-people" />

            <Button transparent onPress={this._executeSearch}>
            <Text>Search</Text>
          </Button>
          </Item>
        </Header>

        <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
            horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                  <Button>
                    <Text>{item.key}</Text>
                  </Button>

              }>
        </FlatList>
      </Content>

    );
  }

Eine Fehlermeldung ist unter anderem:

Warnung: flexWrap:wrap`` wird bei den VirtualizedList Komponenten nicht unterstützt. Verwenden Sie stattdessen numColumns mit FlatList.

15
mrmagoo

Wie ich die Komponenten einwickeln konnte, erfahren Sie weiter unten

flatlist: {
   flexDirection: 'column',
},

und in meiner FlatList Komponente diese Requisiten hinzugefügt

numColumns={3}
26
Mozak

Leider wird flexWrap in FlatLists in der Tat nicht unterstützt. Es wird empfohlen, eine ScrollView anstelle einer FlatList zu verwenden, um diesen Effekt zu erzielen. Dies ist das Problem: https://github.com/facebook/react-native/issues/13939

2
sinewave440hz