26

クエリによって返される用語のリストがあります。それぞれが一言です。現在、FlatList は各単語を同じ行 (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`` はサポートされていません。代わりにwithVirtualizedListを使用することを検討してください。numColumnsFlatList

4

5 に答える 5