在平面列表项中播放反应原生视频卡住 UI 并崩溃一段时间

Question

我有图片&视频文件，在react native中使用平面列表，并根据文件类型使用图像视图或react-native- Video &现在第一次渲染时多个视频开始播放，应用程序UI卡得很厉害&然后应用程序崩溃了…请帮忙做什么&如何将其最小化……

Answer 1

我想，这对于一个设备来说是太多的渲染了。你应该只播放屏幕上当前可见的视频。

这可能会给你一个想法或几乎完整的解决方案:

您可以使用FlatList的onViewableItemsChangedprop来实现。我不知道怎么处理原生视频，到目前为止还没用过。但是，您必须首先使用下面的第一个代码来检测可查看的项目，并像第二个代码部分那样播放视频元素。我添加了isPlaying作为状态变量，并将其链接到Video元素中作为道具来设置视频播放。我不知道是否在react-native-video中的道具被称为isPlaying，但肯定有一个道具来设置视频是暂停还是播放，只需找到它并相应地重命名isPlaying道具以使其工作。

这段代码将把所有在屏幕上可见的FlatList项放入Viewable[]数组中:

export default function App() {
const [Viewable, SetViewable] = React.useState([]);
const ref = React.useRef(null);
const onViewRef = React.useRef((viewableItems) => {
let Check = [];
for (var i = 0; i < viewableItems.viewableItems.length; i++) {
Check.push(viewableItems.viewableItems[i].item);
}
SetViewable(Check);
});
const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 80 });
return (
<View style={styles.container}>
<FlatList
data={Videos}
keyExtractor={(item) => item._id.toString()}
renderItem={({ item }) => <VideoPlayer {...item} viewable={Viewable} />}
ref={ref}
onViewableItemsChanged={onViewRef.current}
viewabilityConfig={viewConfigRef.current}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});

如果Video元素在屏幕上是可见的，这个元素将"监视"Viewable数组并进行必要的更改。

export default function VideoPlayer({ viewable, _id, source }) {
const video = React.useRef(null);
const [isPlaying, setPlaying] = React.useState(false);
React.useEffect(() => {
if (viewable) {
if (viewable.length) {
if (viewable[0]._id === _id) {
setPlaying(true);
} else {
setPlaying(false);
}
} else {
setPlaying(false);
}
} else {
setPlaying(false);
}
}, [viewable]);
return (
<View>
<Video isPlaying={isPlaying}/>
</View>
);
}