带有视频流的 Flatlist、React Native、Expo，在 Android 上遇到内存问题

问题描述

带有平面列表和每行一个视频的 Expo 应用。 （参考抖音）

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

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

组件结构：

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

• Flatlist => 只传递了 7 条记录，见 flatlist 道具

• Item => 通过 renderItem

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

• TouchableOpacity>

• 视频 => Expo-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：在 IOS 上没有问题堆栈已经 自大约 2018 年以来经常发现，不幸的是到目前为止没有 解决方案，基于 Expo 播放器和 Android 之间的连接
• 上传 - 可能出现哪些错误/优化
• 下载 - 可能出现哪些错误/优化？

经过 10 天的优化和寻找原因，现在我寻求帮助.... 提前致谢。

解决方法

我在 expo-av 和 react native 上遇到了同样的问题。 我使用了 here 的解决方案 我确信这不是最好的，但至少是有效的。