react-native - 带视频流的 Flatlist、React Native、Expo 在 Android 上遇到内存问题

Question

带有平面列表和每行一个视频的 Expo 应用程序。 (参见抖音)

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

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

组件结构:

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

• Flatlist => 只传了7条记录，看flatlist props

• Item => 通过 renderItem

• VideoItem - React.Component> => 包括。 GestureHandle，背景

• TouchableOpacity>

• Video => 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 => 相同的行为。
• 其他公共(public)数据源 => 相同的行为
• 没有要加载的视频 => 没问题

假设:

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

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

Answer 1

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