web-dev-qa-db-ja.com

FlatList動的高さサイジング

オートコンプリートアイテムのリストを提供するオートコンプリートボックスがあります。 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のサイズを増減するにはどうすればよいですか（境界がこのエラーの原因だと思います）。

Sample Image

react-nativereact-native-listviewreact-native-flatlist
15
aprofromindia

追加 flexGrow: 0あなたのリストスタイルに。

26
Julian K

私は同じ問題を抱えていて、上記の解決策は私の場合はうまくいきません。

私にとっての解決策は、FlatListを次のようなScrollViewにラップすることでした。

<ScrollView>
  <FlatList
      data={this.state.listItem}
      renderItem={this.renderItem}
  />
</ScrollView>

動的な高さは、ScollView親によって管理されます。

ドキュメントを参照してください here 。

3
UnableHead