React Native：如果我清除 Listview 数据源，则刷新控件不可用答案

【问题标题】：React Native: Refresh Control not available if I clear the Listview data sourceReact Native：如果我清除 Listview 数据源，则刷新控件不可用
【发布时间】：2016-12-09 02:58:29
【问题描述】：

当我将数据源设置为我的列表视图时，刷新控件（下拉刷新）工作得非常好。如果数据源为空，我无法下拉刷新列表视图。

我的列表视图如下所示：

                <View contentContainerStyle={{flex: 1}}>
                    <ListView
                        style={styles.container}
                        dataSource={this.state.dataSource}
                        renderRow={(data) => <NotificationRow {...data}/>}
                        enableEmptySections={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={this._onRefresh.bind(this)}
                                tintColor="#ff0000"
                                title="Loading..."
                                titleColor="#ffffff"
                                colors={['#ffffff']}
                                progressBackgroundColor="#1976D2"
                            />
                        }
                    />
                </View>

我是否需要将任何道具设置为 Listview 或任何其他方式来启用下拉刷新列表视图，即使数据源为空/null？

我正在寻找此功能，因为我第一次从异步存储加载数据。在下拉刷新时，我会清除存储空间并获取新数据。

【问题讨论】：

你是如何清除数据源的？只需将其设置为null?
我是这样清除的：this.setState({ dataSource: this.state.dataSource.cloneWithRows([]), });
尝试将您的数据源移出课堂。像 const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1!=r2});这可能会有所帮助。
按照建议将数据源移出课堂。没运气。我认为它与传递给不会使 Listview 呈现的数据源的空数据有关。因为 refreshControl 仅在我从列表视图呈现的某些内容中下拉时才处于活动状态。无法弄清楚如何解决这个问题。似乎是一个基本用例，如果列表视图不显示任何数据，用户可能会下拉刷新。
@EnieJakiro，感谢您的意见。回答了这个问题。

标签： react-native pull-to-refresh react-native-listview

【解决方案1】：

您需要使用道具调用refreshing={true} 并完成该过程，独立性是否有新数据或没有您需要设置refreshing={false} 以通知列表您没有更多数据并隐藏加载指示器。

render() {
    return (
      <ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >
      ...
      </ListView>
    );

【讨论】：

【解决方案2】：

当我在手机而不是模拟器上测试应用程序时发现了这一点。即使数据源为空，列表视图也始终存在。在我的例子中，列表视图从文本视图在红线处结束的地方开始。

【讨论】：

我绝对将“无内容”占位符放在 ListView 上，并在该占位符上设置 pointerEvents="none"。这样，ListView 就会接收到触摸事件！
@Sood 感谢您的回答，您能否提供有关如何解决此问题的更多详细信息？我在遵循您的解决方案时遇到了一些麻烦。
修复是正确设置组件布局。我将基于状态变量的文本可见性设置为{ !this.state.visible && this.state.noData && <View style={styles.noData}> <Text style={styles.noDataText}> No new updates! </Text> </View> } 然后在包含在滚动视图中的 ListView 中设置 refreshControl，并将 contentContainerStyle={{flex: 1}} 设置为 ScrollVIew。这样我的 refreshControl 就从顶部开始工作。