Letzter Eintrag in React Native ListView erscheint nicht in voller

Question

Mein Problem ist bisher, folgt: Ich bekomme Tweets von Twitter Streaming API, so dass neue Daten an den unteren Rand der ListView angehängt wird, aber das letzte Element ist nicht vollständig angezeigt, dh die letzte Textzeile (Textelement), und ich kann nicht nach unten scrollen, um diese Zeile zu sehen.

zum Rendern von Listview Mein Code ist:

renderRealtimeSearch() { 
    return (
     <View 
     tabLabel='Realtime Search' 
     style={{padding: 10}} 
     > 
     <TextInput 
      style={{height: 40}} 
      placeholder="Type search query..." 
      onChangeText={(txt) => this.setState({query: txt})} 
     /> 
     <Button 
      onPress={() => this.handleStreamClick()} 
      style={styles.buttonStyle} 
      title='Submit query' 
     /> 
     {this.state.isStreamOn && <View style={{height: 515}}> 
            <ListView 
             ref='list' 
             onLayout={(event) => { 
              var layout = event.nativeEvent.layout; 
              this.setState({ 
               listHeight : layout.height 
              }); 
             }} 
             style={styles.realTweetsListView} 
             dataSource={this.state.realtimeTweets} 
             renderRow={(rowData) => { 
                   console.log(rowData.text); 
                   return (
                    <View> 
                    <View style={styles.container}> 
                     <Image source={{uri: rowData.avatar_url}} style={styles.photo}/> 
                     <Text style={styles.title}>{rowData.author_name}</Text> 
                    </View> 
                    <View> 
                     <Text style={styles.text}>{rowData.text}</Text> 
                     <Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text> 
                     <Text style={styles.link}>{rowData.tweet_url}</Text> 
                    </View> 
                    </View> 
                   ); 
             } 
               } 
             renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />} 
             renderFooter={() => { 
              return (
              <View onLayout={(event)=>{ 
               var layout = event.nativeEvent.layout; 
               this.setState({ 
                footerY : layout.y 
               }); 
               }}> 
              </View> 
             ); 
             }} 
            /> 
           </View> 
     } 
     </View> 
    ); 
    } 

Und in der Hauptfunktion machen (nur für den Fall dieser Fehler durch ScrollableTabView verursacht)

render() { 
    return (
     <ScrollableTabView 
     renderTabBar={() => <DefaultTabBar />} 
     ref={(tabView) => { this.tabView = tabView; }} 
     > 
     {this.renderTwitterSearch()} 
     {this.renderRealtimeSearch()} 
     {this.renderDBSearch()} 

     </ScrollableTabView> 
    ); 
    } 
} 

Answer 1

In Fall kann es die Hilfe sein, andere, würde ich eine Lösung posten: um dieses Stück Code zu arbeiten, wickle ich ListView und seine Kinder in ScrollView Element, so würde Code wie folgt sein:

renderRealtimeSearch() { 
    return (
     <View 
     tabLabel='Realtime Search' 
     style={{padding: 10}} 
     > 
     <TextInput 
      style={{height: 40}} 
      placeholder="Type search query..." 
      onChangeText={(txt) => this.setState({query: txt})} 
     /> 
     <Button 
      onPress={() => this.handleStreamClick()} 
      style={styles.buttonStyle} 
      title='Submit query' 
     /> 
     {this.state.isStreamOn && <ScrollView style={{height: 520}}> 
            <ListView 
             renderScrollComponent={props => <InvertibleScrollView {...props} inverted />} 
             style={styles.realTweetsListView} 
             dataSource={this.state.realtimeTweets} 
             renderRow={(rowData) => { 
                   return (
                    <ScrollView> 
                    <View style={styles.container}> 
                     <Image source={{uri: rowData.avatar_url}} style={styles.photo}/> 
                     <Text style={styles.title}>{rowData.author_name}</Text> 
                    </View> 
                    <View> 
                     <Text style={styles.text}>{rowData.text}</Text> 
                     <Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text> 
                     <Text style={styles.link}>{rowData.tweet_url}</Text> 
                    </View> 
                    </ScrollView> 
                   ); 
               } 
             } 
             renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />} 
            /> 
           </ScrollView> 
     } 
     </View> 
    ); 
    }