FlatList React Native 0.60 Android Blank and Freezes

问题

Final Update

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

Update of Update

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

Update

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.

Original Post

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>
  )}
  />

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!

Edit: 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.

回答1:

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:

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.

来源：https://stackoverflow.com/questions/58089328/flatlist-react-native-0-60-android-blank-and-freezes

标签

android

react-native

react-native-flatlist