1

带有平面列表和每行一个视频的 Expo 应用程序。（参见 TikTok）

  • 世博 SDK 40.0.0
  • Flatlist - 优化 (shouldComponentUpdate) + 查看道具，最多同时渲染 2 行。没有在视野中的线被干净地卸载。只有视野中的视频运行，第二个暂停。
  • 世博-AV
  • Google-Firebase Cloudstorage：视频也由应用生成和上传。

问题：最迟在渲染第 4 个视频后，应用程序在 Android 上遇到内存问题。从一开始就在 IOS 设备上没有问题。错误消息/警告：VirtualizedList：您有一个更新缓慢的大列表....之后，视频很长一段时间都没有加载，只有几分钟后两个要渲染的视频才会再次出现.

组件结构：

  • VideoStream - React.Component => 所有可用并存储在 Redux 存储中的数据。

  • Flatlist => 仅通过了 7 条记录，请参阅 flatlist 道具

  • 项目 => 通过渲染项目

  • VideoItem - React.Component> => 包括。手势手柄，背景

  • 可触摸不透明度>

  • 视频 => 世博会-AV

     <View style={styles.container}>
     <FlatList
       snapToAlignment={'start'}
       snapToInterval={screenHeight}
       decelerationRate={'fast'}
       scrollEventThrottle={250}
       pagingEnabled
       showsVerticalScrollIndicator={false}
       vertical={true}
       scrollEnabled={true}
       style={{flex: 1}}
       data={videos}
       renderItem={this.renderItem}
       keyExtractor={this.keyExtractor}
       onViewableItemsChanged={this.onViewableItemsChanged}
       initialNumToRender={0}
       maxToRenderPerBatch={1}
       windowSize={2}
       getItemLayout={this.getItemLayout}
       onEndReached={this.onEndReached}
       onEndReachedThreshold={0.1}
       viewabilityConfig={viewabilityConfig}
       removeClippedSubviews={true}
     />
 </View>
  viewabilityConfig = {
     itemVisiblePercentThreshold: 75,
  };

测试：

  • Stream 和 loadAsync => 相同的行为。
  • 替代公共数据源 => 相同的行为
  • 没有要加载的视频 => 没问题

假设：

  • Android - 和 Expo-AV：自 2018 年左右以来，在没有问题的 IOS 上经常发现堆栈，不幸的是，基于 Expo 播放器和 Android 之间的连接，到目前为止还没有解决方案
  • 上传 - 哪些错误/优化是可能的
  • 下载 - 哪些错误/优化是可能的？

经过 10 天的优化和寻找原因，现在我寻求帮助.... 非常感谢。

4

1 回答 1

0

我对 expo-av 也有同样的问题，并做出了本机反应。我使用了这里的解决方案， 我确信这不是最好的，但至少可以正常工作。

于 2021-06-14T15:41:18.823 回答