FlatList React Native 0.60 Android 空白和冻结 [英] FlatList React Native 0.60 Android Blank and Freezes

问题描述

我正在回答我自己的问题.请参阅下面的答案.

I'm answering my own question. See answer below.

即使我用 this.state.updating 解决了这个问题，仍然没有运气.显然这里发生的问题不止一个.

Still no luck even after I fixed the issue with this.state.updating. Apparently there is more than one issue going on here.

事实证明，我重用了一些为早期应用编写的旧 FlatList 代码，而没有重用对 this.state.updating 的其他引用，这就是我指向 extraData 的内容.所以我有效地将 extraData 指向空.我最好的猜测是为什么这只会阻止 FlatList 使用 0.60.0 以上的 React Native 在 Android 中呈现:React Native 0.60.0 及更高版本的版本在 Android 上稍慢，所以我没有那么快地获取我的数据.这可能意味着页面在我获取数据之前呈现，并且由于 FlatList 不会重新呈现，如果状态保持浅相等，它从未显示任何数据.如果为 this.state.updating 添加代码不起作用，我会进一步编辑它，但我认为这就是问题所在.

It turns out I had reused some old FlatList code I'd written for an earlier app without reusing other references to this.state.updating, which is what I am pointing extraData to. So I was effectively pointing extraData to nothing. My best guess as to why this only stopped FlatList from rendering in Android using React Native above 0.60.0: Versions of React Native 0.60.0 and later are slightly slower on Android so I was not getting my data in as quickly. This would probably mean that the page rendered before I got data in and since FlatList doesn't re-render if state remains shallow equal it never showed any data. If adding in code for this.state.updating doesn't work I'll edit this further but I think this is the issue.

我有一个 FlatList，它在 React Native >= 0.60.0 的 Android 中不起作用，但适用于所有其他情况.任何低于 0.60.0 的东西在两个平台上都很好，在 IOS 上任何东西都很好.在使用 RN 0.60.0 或更高版本的 Android 中，FlatList 始终为空白，有时会冻结应用程序，即使我可以看到我的数据在控制台中正确输入.这不仅适用于 RN 0.60.1 中包含的 Hermes，因为我在介绍 Hermes 之前也遇到了该版本的问题.在 RN 0.59.9 上我没有这个问题，但坚持使用 59 不是一个长期的解决方案.我查看了 RN 更新日志，但似乎无法弄清楚问题是什么.这是我的代码:

I have a FlatList that does not work in Android in React Native >= 0.60.0 but works in every other situation. Anything below 0.60.0 is fine on both platforms, and anything is fine on IOS. In Android using RN 0.60.0 or above FlatList is always blank and sometimes freezes the app even though I can see my data is coming in correctly in the console. This is not just for hermes, which was included in RN 0.60.1, because I'm also having trouble with the version immediately before hermes was introduced. On RN 0.59.9 I do not have this problem, but sticking with 59 is not a long term solution. I have looked at the RN changelog but can't seem to figure out what the issue is. Here is my code:

<FlatList
 style={styles.listStyle}
 bounces={false}
 refreshControl={
 <RefreshControl
 refreshing={this.state.refreshing}
 onRefresh={this._onRefresh}
 />
 }

 data={this.state.notices}
 keyExtractor={item => item.id}
 initialNumToRender={8}
 maxToRenderPerBatch={2}
 updateCellsBatchingPeriod={100}
 onEndReachedThreshold={0.5}
 removeClippedSubviews={true}
 windowSize={7}
 extraData={this.state.updating}

 onEndReached={this._onEndList}

 ListFooterComponent={this.renderFooter}
 renderItem={({ item }) => (
 <View style={styles.hidingOverflow}>
 {this.state.loading === false &&     <TouchableOpacity
 style={styles.myBackGround}
 onPress={() =>

 this.props.navigation.navigate('NoticeDetailScreen', {
 noticeDetail: item,
 database: databasenum,
 threshold: thresholdnum
})} title="Details"
key={item.id} style={styles.myCardStyle}>

  <View style={styles.myLayout}>

    <View style={styles.myPhotoContainer}>

    {item.triggerPhotos.length>0 &&
      <View
        style={styles.alertImgContainer}
      >
        <Image source={{ uri: not shown for purposes of this post }} style={styles.alertImg} />
      </View>
    }

    </View>

<View style={styles.listText}>

  <View style={styles.hiddingOverflow}>
    <View style={styles.hiddingOverflow}>
      {item.name !== null &&  <Text style={styles.titleText}>Name: {item.name}</Text>}
      </View>
  </View>
  {item.updated !== null &&
  <Text style={styles.detailsText}>Updated: { item.updated }</Text>}
  {item.score !== null &&
  <Text style={styles.detailsText}>Top Score: { item.score.toFixed(2) }</Text>}
</View>


<View>
<Text></Text>
</View>

  </View>
  </TouchableOpacity>}
  </View>
  )}
  />

我知道这不是升级 RN 应用程序的问题，因为我创建了一个新版本而不是更新旧版本.有没有其他人处理过这个问题?谢谢！

I know this is not an issue with the process of upgrading a RN app because I created a new version instead of updating the old one. Has anyone else dealt with this? Thanks!

我还应该注意到，在调试期间或在控制台中使用 react-native log-android 时，FlatList 不会在黄色框中触发任何错误消息.

I should also note that FlatList triggers no error messages in the yellow boxes during debugging or in the console using react-native log-android.

推荐答案

好吧，抱歉，没有其他人可以回答这个问题，因为我没有发布我的样式表，它与样式表有关.我没想到会这样，否则我会将其添加到原始问题中.所以答案如下:

Ok, sorry, there is no way anyone else could have answered this because I did not post my stylesheet and it had to do with the stylesheet. I was not expecting that or I would have added it into the original question. So here's the answer:

显然，在 FlatList(或任何其他组件)中同时包含 flex: 1 的项目是不行的，同时它所在的页面也有 flex: 1 表示主视图包含所有内容，如果您在以下位置使用 RN或高于 0.60.0 在 Android 上.在任何平台上 RN 低于 0.60.0 都可以，IOS 中任何版本的 RN 都可以.在 Android 上的 RN >= 0.60.0 上，该组件将只是短暂出现，然后消失，或者根本不出现.不过它不会给你任何错误信息.

Apparently it is not ok to have items with flex: 1 inside a FlatList (or any other component) at the same time as the page it's on also has flex: 1 for the main View containing everything if you are using RN at or above 0.60.0 on Android. It's ok on RN below 0.60.0 on any platform and ok with any version of RN in IOS. On RN >= 0.60.0 on Android the component will just appear briefly, then disappear, or not appear at all. It will not give you any kind of an error message though.

这篇关于FlatList React Native 0.60 Android 空白和冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！