Reactjs 平面列表中项目之间的大空间

我正在实现类似Facebook的评论页面。不知何故，我得到了大量的空白。看看这个

当我滚动到底部时。。。其余的评论都在那里。。真奇怪

这是我的渲染函数和平面列表

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

render（）{
返回(
{
键盘；
}}>
{this.\u renderKeyboard（）}
)
}
_键提取器（项，索引）{
返回item.id；
}
_renderSeparator（）{
返回(
)
}

我设置了平面列表的背景色，它为所有屏幕（除了键盘和导航）上色。直到我实现键盘输入，我才注意到这一点。所以键盘没有问题

---

这真是太糟糕了

在我看来，空间看起来与键盘大小完全相同，请尝试使用RKAVOIDKEYBORD间隔键，而不是使用RKAVOIDKEYBORD间隔键

它很容易设置，您只需将其设置在CommentTextInput组件下或容器底部，以适合您的为准

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

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

此.\u renderFlatListItem（item）}
keyExtractor={（项）=>item.id}
/>
{this.textInput=input}}
onChangeText={（text）=>this.setState（{currentMessage:text}）}
值={this.state.message}
多行={true}
underlineColorAndroid={'transparent'}
/>
{this._sendMessage（）；}}>

---

祝你一切顺利

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

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

---

谢谢你们

这其实是一个很好的观点。谢谢你的贡献。它实际上解决了我的键盘间隔问题，但空间保持不变。还有什么想法吗？试着将style={{flex:1}}添加到flatlist中。这篇文章有什么想法吗？？我想你可能有一些想法