FlatList 中项目之间的大空间答案

【问题标题】：Big Space between items in FlatListFlatList 中项目之间的大空间
【发布时间】：2017-10-15 12:32:21
【问题描述】：

我正在实施类似 Facebook 的评论页面。不知何故，我得到了很多空白。看看这个！

当我将它滚动到底部时……其余的 cmets 都在那里……太奇怪了

这是我的渲染函数和 FlatList

render() {
    return (
        <RkAvoidKeyboard style={styles.bigContainer} onResponderRelease={(event) => {
        Keyboard.dismiss();
      }}>
        <FlatList
          ref='list'
          style={styles.root}
          data={this.props.comments}
          ItemSeparatorComponent={this._renderSeparator}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}/>
            {this._renderKeyboard()}
        </RkAvoidKeyboard>
    )
  }

_keyExtractor(item, index) {
    return item.id;
  }

  _renderSeparator() {
    return (
      <View style={styles.separator}/>
    )
  }

我设置了 FlatList 的背景颜色，它为所有屏幕着色（键盘和导航除外）。在我实现键盘输入之前，我没有注意到这一点。所以键盘没什么问题。

这太奇怪了..!!

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

对我来说，空间看起来与键盘的大小完全一样，而不是使用 RkAvoidKeyboard 间隔，尝试使用react-native-keyboard-spacer

它很容易设置，您只需将它设置在您的评论 textInput 组件下或容器底部，无论哪个适合您。

这是我可以提供的样本，可能会对您有所帮助

<View>

<FlatList
    data = {dataSource}
    renderItem = {({item}) => this._renderFlatListItem(item)}
    keyExtractor = {(item) => item.id}
/>


<View style={style.textInputContainer}>

    <TextInput
        placeholder={"Text goes here"}
        ref={input => { this.textInput = input }}
        onChangeText={(text) => this.setState({currentMessage:text})}
        value={this.state.message}
        multiline={true}
        underlineColorAndroid = {'transparent'}
    />

    <TouchableHighlight 
        underlayColor={'transparent'} 
        style={style.sendButtonContainer} 
        onPress = {() => {this._sendMessage();}}>

        <Image  source={require('../../Assets/Images/shape.png')} 
                style={style.sendButton} resizeMode="contain"/>

    </TouchableHighlight>


</View>

<KeyboardSpacer/>

一切顺利！

【讨论】：

这实际上很重要。感谢您的贡献。它实际上解决了我的 KeyboardSpacer 问题，但空间保持不变。还有什么想法吗？
尝试将 style = {{flex:1}} 添加到 flatList
对这篇文章有什么想法吗？？我想你可能有一些想法stackoverflow.com/questions/46864293/…

【解决方案2】：

我的头像图片为空，并且显示了巨大的空白列表。

我在控制台上打印所有 cmets 时发现了这一点。

谢谢你们！

【讨论】：