FlatList中物品之間的大空間

我正在實施類似Facebook的評論頁面。不知何故，我得到了大量的空白。看一下這個！FlatList中物品之間的大空間

當我把它滾動至底部...評論剩下的都是有..如此怪異

這裏是我的渲染功能和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的背景顏色，併爲所有屏幕（鍵盤和導航除外）着色。我沒有注意到，直到我實現我的鍵盤輸入。所以鍵盤沒什麼問題。

這太容易了！

來源

2017-10-15 John Baek

我得到空我的頭像圖像，並顯示巨大的空白列表。

我在打印控制檯上的所有註釋時想到了這一點。

謝謝你們！

來源

2017-10-17 04:00:05

爲了我的空間看起來完全鍵盤的大小，而不是使用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/>

所有最優秀的！

來源

2017-10-16 18:05:07

這實際上是偉大的一點。感謝您的貢獻。它實際上解決了我的KeyboardSpacer問題，但空間保持不變。還有什麼想法？ –

嘗試在flatList中添加style = {{flex：1}} –

對這篇文章有任何想法？我想你可能有一些想法https://stackoverflow.com/questions/46864293/how-to-draw-square-to-tag-an-object-react-native –

FlatList中物品之間的大空間

回答

相關問題