FlatList React Native 0.60 Android 空白和冻结答案

【问题标题】：FlatList React Native 0.60 Android Blank and FreezesFlatList React Native 0.60 Android 空白和冻结
【发布时间】：2019-09-24 23:35:55
【问题描述】：

最终更新

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

更新更新

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

更新

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

原帖

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

<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 应用程序的问题，因为我创建了一个新版本而不是更新旧版本。有没有其他人处理过这个？谢谢！

编辑：我还应该注意 FlatList 在调试期间或使用 react-native log-android 在控制台中不会触发黄色框中的错误消息。

【问题讨论】：

标签： android react-native react-native-flatlist

【解决方案1】：

好的，抱歉，其他人无法回答这个问题，因为我没有发布我的样式表，而且它与样式表有关。我没想到会这样，否则我会将其添加到原始问题中。所以这里是答案：

显然，在 FlatList（或任何其他组件）中包含 flex: 1 的项目，同时它所在的页面也具有 flex: 1 用于包含所有内容的主视图（如果您在在 Android 上为 0.60.0 或以上。在任何平台上低于 0.60.0 的 RN 上都可以，并且在 IOS 中的任何版本的 RN 上都可以。在 Android 上的 RN >= 0.60.0 上，组件只会短暂出现，然后消失，或者根本不出现。但它不会给您任何类型的错误消息。

【讨论】：