Question

我正在实施像Facebook这样的评论页面。不知怎的，我得到了充足的空白。看看这个！

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

这是我的渲染功能和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

对我来说，空间看起来与键盘大小完全相同，而不是使用RkAvoidKeyboard spacer，尝试使用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/>

一切顺利！

Answer 2

我的头像图片显示为null，显示空白列表很大。

我在控制台上打印所有评论时想出来了。

谢谢你们！

FlatList中项目之间的大空间

2 个答案: