listView不显示，除非我滚动它

Posted 2021-04-01

我的反应原生应用程序上有一个图形错误，它只出现在ios上，而不是在android上。

当我更新历史记录屏幕的应用程序状态时（在启动时，或者当我添加一个骑行，或当我移除一个骑行时），我的历史骑行项目列表消失（使用反应本机ListView实现）。我需要触摸屏幕才能显示出来。之后，在屏幕之间导航期间，我没有问题（因为我没有重新渲染历史记录屏幕）。

我使用redux + reactnavigation。在启动时，我使用一个常用的操作“LOAD_RIDES”，我在每个屏幕缩减器中重用它来更新其状态。与动作ADD_RIDE，REMOVE_RIDE相同。

但我发现，如果我在启动时自动导航到历史记录（通过要求我的导航减速器在启动时转到历史记录），并且屏幕更新发生在之后，而历史屏幕已经显示，我没有这个bug（历史项隐藏）。

不知道怎么解决这个问题？谢谢！

"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-navigation": "1.0.0-beta.9",
"react-redux": "^5.0.3",

---

为了重现这个bug，我创建了那个回购：https://github.com/jcharlet/react_native_listview_bug

有趣的部分是HistoryScreen，其中创建了listView。 https://github.com/jcharlet/react_native_listview_bug/blob/master/src/screens/history/HistoryScreen.js

主分支显示操作中的错误，unfisfying_workaround分支显示如果我在更新其状态之前显示历史屏幕，它会正确显示列表。

---

到目前为止，我尝试过失败了

• 使用ListView.scrollTo渲染屏幕时滚动到0,0
• 导航到历史记录屏幕时再次使用redux加载游乐设施
• 升级反应并对原始版本做出反应
• 生成一个单独的redux动作，用于在历史屏幕'LR'中加载游乐设施（我在hackDetails和History屏幕中使用相同的LOAD_RIDES动作来更新它们的状态）

在Chrome开发工具中，我在使用导航工作之前/之后查看了redux状态（在加载游乐设施之前导航到历史记录屏幕）以及当我不使用时：没有任何变化。

答案

反应原生虫我的问题提出https://github.com/facebook/react-native/issues/14069，重复https://github.com/facebook/react-native/issues/1831

引用回答它的人：

可以通过将removeClippedSubviews = {false}添加到ListView来解决。它可能会导致一些性能问题取决于您的列表是https://facebook.github.io/react-native/docs/listview.html#removeclippedsubviews，但这就是我们一直在使用的。

（在William对属性拼写的评论后编辑）

另一答案

我通过稍微延迟设置数据源找到了解决方法。

在componentWillMount方法中从远程源加载数据时，将运行以下代码。似乎工作：

setTimeout(function(){
       this.updateDataSource(array,newArray)
},300)

updateDataSource = (comments,dataSource) =>{
        this.setState({
            allComments:comments,
            dataSource: this.state.dataSource.cloneWithRows(dataSource),
            isLoading:false

        })
}

在轻微延迟期间，您始终可以显示加载屏幕。它太短了，甚至都看不到。