web-dev-qa-db-ja.com

React-native：FlatListアイテムをラップする方法

クエリによって返される用語のリストがあります。それぞれが単一のWordです。現在、私のFlatListは各Wordを同じ行のボタンにレンダリングします（horizo​​ntal = {true}）通常のテキストのようにボタンをラップしたいです。しかし、コラム機能を使用することは絶対にしたくないです。なぜなら、それは自然に見えないからです。これはおそらくFlatListの悪いユースケースですか？使用できる他のコンポーネントはありますか？

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>

    );
  }

私が得た他のエラーメッセージの1つは次のとおりです。

警告：flexWrap:wrap``はVirtualizedListコンポーネントではサポートされていません。代わりにnumColumnsでFlatListを使用することを検討してください。

react-nativereact-native-flatlistreact-native-flexbox
15
mrmagoo

コンポーネントをどのようにラップできたかは、次のようなものでした

flatlist: {
   flexDirection: 'column',
},

flatListコンポーネントにこの小道具を追加しました

numColumns={3}
26
Mozak

残念ながら、flexWrapはFlatListでは実際にサポートされていません。この効果を作成するには、FlatListではなくScrollViewを使用することをお勧めします。これが問題です： https://github.com/facebook/react-native/issues/13939

2
sinewave440hz