FlatList에있는 항목 사이의 큰 공간

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의 배경색을 설정하고 모든 화면의 색상을 지정합니다 (키보드 및 탐색 제외). 키보드 입력을 구현할 때까지이 사실을 알지 못했습니다. 키보드에는 아무런 문제가 없습니다.

이것은 매우 약합니다 .. !! 공간 대신 ​​RkAvoidKeyboard 스페이서를 사용하는, 정확히 키보드의 크기를 보이는 나에게

Answer 1

내 아바타 이미지에 null이 표시되어 엄청난 빈 목록이 표시되었습니다.

콘솔에 모든 댓글을 인쇄하는 동안 이것을 알아 냈습니다.

감사합니다.

Answer 2

사용하려고

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

도움이 될 수 있습니다!