React Native ListView 中的最后一项没有完整显示

Question

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

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

如果它可能对其他人有帮助，我会 post 一个解决方案：为了使这段代码工作，我将 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>
    );
  }

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>

React Native ListView 中的最后一项没有完整显示

Last item in React Native ListView doesn't appear in full

react-native

react-native-listview

react-native-android