FlatList の動的高さ調整 質問する

FlatList の動的高さ調整 質問する

オートコンプリート アイテムのリストを表示する AutoComplete Box があります。アイテムを FlatList に表示し、FlatList の周囲に境界線も表示します。コードは次のとおりです: -

render(){
return (
  <View>
    <TextInput
       clearButtonMode="while-editing"
       onChangeText={this.onChangeText}
       value={this.state.searchText}
       onSubmitEditing={this.onTextSubmitted}
       placeholder="Find..." />
       {this.state.data.length > 0 &&
        <FlatList
           style={styles.list}
           keyboardShouldPersistTaps="handled"
           data={this.state.data}
           ItemSeparatorComponent={this.renderSeparator}
           keyExtractor={item => item.properties.id}
           renderItem={this.renderItem} />});
}

const styles = StyleSheet.create({
list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
  },
});

リスト項目の数に応じて FlatList のサイズを増減するにはどうすればよいですか (このエラーの原因は境界線にあると思います)。

サンプル画像

ベストアンサー1

flexGrow: 0リスト スタイルに追加します。

おすすめ記事