React Native ListViewの最後の項目が完全に表示されない

Question

これまでのところ、私はTwitter Streaming APIからツイートを取得していますので、新しいデータがListViewの最後に追加されます。つまりテキストの最後の行（テキスト要素）には表示されず、その行を表示するためにスクロールする方法はありません。

リストビューをレンダリングするための私のコードは次のとおりです。

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

そしてメインのレンダリング機能（ScrollableTabViewによって引き起こさ念のため、このエラー）場合

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

     </ScrollableTabView> 
    ); 
    } 
} 

Answer 1

で、それはするのに役立つかもしれ他の人は、私は解決策を投稿したいと思います：このコードを動作させるために、ListViewとその子をScrollView要素に入れてコードします。

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