Проблема с отображением нескольких экземпляров видео в плоском списке - PullRequest
Новая
       18

Проблема с отображением нескольких экземпляров видео в плоском списке

0 голосов
/ 16 апреля 2019

У меня проблемы с отображением видео в плоском списке. Кажется, это специфическая проблема iOS на реальных устройствах, так как она отлично работает в симуляторе и на Android. Используя react-native-video и в журналах ошибок я получаю AVFoundationErrorDomain с кодом ошибки 11839. После некоторого времени поиска кажется, что у реальных устройств есть ограничения на количество экземпляров видео, которые они могут показать одновременно.

Итак, я получаю черный экран в компоненте видео с серыми элементами управления с зачеркнутой кнопкой воспроизведения. Структура плоская -> дочерняя -> видео. Я попытался изменить порядок и переместить видео компонент на уровень, но та же проблема. Плоский список будет отображать элементы по 10 одновременно и может содержать изображения или видео.

Я попытался сохранить ключ элемента, который рендерится с помощью onViewableItemsChanged prop, и сохранить его и максимум десять в приставке. Затем я извлекаю этот массив, где компонент видео отображается для отображения компонента видео только с идентификатором Элемент такой же, как в массиве из Redux. Теоретически это должно отображать только те элементы, которые просматривались или просматривались недавно

Раньше видео вообще не загружалось, теперь они воспроизводятся некоторое время, но после того, как пара была воспроизведена и воспроизведена, проблема возвращается. Фактический компонент всегда отображается (если ключи / идентификаторы были сохранены и извлечены для редукции), но имеет черный экран

Буду признателен всем, у кого есть другое решение или вход в мой код, чтобы помочь мне с этими проблемами.

Разбавление: 

  let feedIdsArr = [...state.savedFeedIds];
  let newFeedId = action.payload;

  if (feedIdsArr.length < 10) {
    if (!feedIdsArr.includes(newFeedId)) {
      feedIdsArr.push(newFeedId)
    }
  } else {
    feedIdsArr.shift()
  }
  console.log("SAVE_FEED_ID", feedIdsArr);
  return {...state, savedFeedIds: feedIdsArr};

Действие: 

  return dispatch => {
    dispatch({
      type: SAVE_FEED_ID,
      payload: id
    });
  }
}

Визуализация: 

if (this.props.savedFeedIds.includes(this.props.feed.feedItemId)) {
  return (
    <Video
      source={{uri: url}}
      style={this.calculateVideoAspectRatio(videoGallery, orientation)}
      controls={true}
      paused={true}
      resizeMode={orientation === 'portrait' ? "cover" : null}
      fullscreen={false}
      ref={r => this.player = r}
      onError={err => console.log("VIDEO ERROR", err)}

    />
  )
}

onViewableItemsChanged: 

onViewableItemsChanged = ({viewableItems}) => {
  viewableItems.forEach(item => {
    if (item.item.videoGallery) {
      this.props.feedItemIds(item.key)
    }
  })
};
...