React Native ListView中的最后一项不会完整显示

Question

到目前为止，我的问题是：我从Twitter Streaming API获取推文，因此新数据会附加到ListView的底部，但最后一项不会完整显示，即最后一行text（文本元素），我无法向下滚动以查看该行。

我渲染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

如果它可能是对他人的帮助，我会发布一个解决方案：为了使这段代码工作，我将 ........... ................... if (success == 1) { // resorts found // Getting Array of resorts resorts = json.getJSONArray("resorts"); rates = json.getJSONArray("room_prices"); int i; // looping through All resorts for (i = 0; i < resorts.length() & i < rates.length(); i++) { // Storing each json item in variable String name = resorts.getString(i); String price = rates.getString(i); // creating new HashMap HashMap<String, String> map = new HashMap<String, String>(); // adding each child node to HashMap key => value map.put(TAG_NAME, name); map.put(TAG_ROOM_PRICE, price); // adding HashList to ArrayList resortsList.add(map); } } 及其子项包装到ListView元素中，因此代码如下：

ScrollView

Answer 2

您可以简单地在列表视图的根组件上添加一个带有flex = 1的样式属性。

 <View style={{flex: 1}}>
            <ListView
                style={{paddingBottom: 5, marginBottom: 0}}
                enableEmptySections
                dataSource={this.state.albums}
                renderRow={album => <AlbumDetail key={album.title}
                                                 album={album}/>}
            />
  </View>