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