FlatList React Native 0.60 Android пусто и зависает - PullRequest
Новая
       31

FlatList React Native 0.60 Android пусто и зависает

0 голосов
/ 25 сентября 2019

Окончательное обновление

Я отвечаю на свой вопрос.См. Ответ ниже.

Обновление обновления

Все еще не повезло, даже после того, как я исправил проблему с this.state.updating.По-видимому, здесь происходит несколько проблем.

Обновление

Оказывается, я повторно использовал какой-то старый код FlatList, который написал для более раннего приложения, без повторного использования других ссылок на this.state..dupating, это то, на что я указываю extraData.Таким образом, я фактически указывал extraData на ничто.Мое лучшее предположение относительно того, почему это только остановило FlatList от рендеринга в Android с использованием React Native выше 0.60.0: версии React Native 0.60.0 и более поздних версий немного медленнее для Android, поэтому я не получал свои данные так быстро.Это, вероятно, означало бы, что страница отображалась до того, как я получил данные, и поскольку FlatList не выполняет повторную визуализацию, если состояние остается ровным, оно никогда не показывало никаких данных.Если добавление кода для this.state.updating не работает, я отредактирую это далее, но я думаю, что это проблема.

Исходное сообщение

У меня есть FlatList, который не работаетв Android в React Native> = 0.60.0, но работает в любой другой ситуации.Все, что ниже 0.60.0, хорошо на обеих платформах, и все хорошо на IOS.В Android, использующем RN 0.60.0 или выше, FlatList всегда пуст и иногда зависает в приложении, хотя я вижу, что мои данные правильно поступают в консоль.Это не только для hermes, который был включен в RN 0.60.1, потому что у меня также возникают проблемы с версией непосредственно перед введением hermes.На 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 не вызывает сообщений об ошибках в желтых полях во время отладки или в консоли с использованием собственного протокола реакции-android.

1 Ответ

0 голосов
/ 26 сентября 2019

Хорошо, извините, никто не мог ответить на этот вопрос, потому что я не опубликовал свою таблицу стилей, и это было связано с таблицей стилей.Я не ожидал этого, иначе я бы добавил это в исходный вопрос.Итак, вот ответ:

По-видимому, неправильно иметь элементы с flex: 1 внутри FlatList (или любого другого компонента), в то время как страница, на которой он находится, также имеет flex: 1 для основного представлениясодержащий все, если вы используете RN на уровне или выше 0.60.0 на Android.Это нормально для RN ​​ниже 0.60.0 на любой платформе и нормально с любой версией RN в IOS.При RN> = 0.60.0 на Android компонент просто ненадолго появится, затем исчезнет или не появится вообще.Это не даст вам никакого сообщения об ошибке.

...