2

我在平面列表中显示视频时遇到了一些问题。这似乎是真实设备上的特定 iOS 问题，因为它在模拟器和 android 上运行良好。使用react-native-video和在错误日志中我得到AVFoundationErrorDomain错误代码11839。搜索了一段时间后，似乎真实设备一次可以显示多少个视频实例。

所以我在视频组件中出现黑屏，带有灰色的控件和一个划掉的播放按钮。结构是平面列表 -> 子 -> 视频。我尝试更改顺序并将视频组件提升一个级别，但同样的问题。flatlist 将一次呈现 10 个项目，并且可以包含图像或视频。

我已经尝试保存使用 onViewableItemsChanged 属性渲染的项目的键并将其保存，并且在 redux 中最多保存十个。然后我获取渲染视频组件的这个数组以仅渲染项目 id 所在的视频组件与 redux 中的数组相同。理论上，这应该只渲染最近查看或已查看的项目。

在此之前，视频根本没有加载，现在它们被渲染了一段时间，但是在渲染并播放了一对之后，问题又回来了。实际的组件总是被渲染（如果键/id 已经被保存并被提取到 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)
    }
  })
};
4

0 回答 0