FlatList 中项目之间的大 Space

Question

我正在像 Facebook 一样实现评论页面。不知何故，我得到了很多白色 space。看看这个！

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

这是我的渲染函数和 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 的背景颜色，它为所有屏幕着色（键盘和导航除外）。在我实现键盘输入之前我没有注意到这一点。所以键盘没有错。

这太奇怪了..!!

Answer 1

对我来说 space 看起来和键盘的尺寸完全一样，而不是使用 RkAvoidKeyboard spacer，尝试使用 react-native-keyboard-spacer

它很容易设置，您只需将其设置在评论文本输入组件下方或容器底部，以适合您的方式设置。

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

<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/>

祝一切顺利！

Answer 2

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

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

谢谢大家！

FlatList 中项目之间的大 Space

Big Space between items in FlatList

reactjs

react-native

react-native-flatlist