在 React-Native 的视口中使用 Skele 组件播放视频

Question

作为一个菜鸟，我正在尝试创建一个在视口中播放视频(本地视频)的应用程序。用户左右滚动，当视频在视图中时，它会自动播放。如果视频不在视线范围内，它将停止播放。

我尝试按照以下教程进行操作： https://codedaily.io/courses/4/Fundamentals-of-React-Native-Video/37

将所有计算更改为使用宽度而不是高度，但不起作用。

然后我偶然发现了骨架组件： https://blog.netcetera.com/viewport-aware-components-for-react-native-apps-a28ea605e89e

这将检查组件是否在视图中。作为测试，我在 ScrollView 中放置了 2 个视频。滚动 I 控制台。记录"已输入"表示视频进入时，"左"表示视频离开视口。视口清楚地显示一个视频，但控制台记录 2 个"已输入"。告诉我逻辑不起作用。此外，当视频滚动到视图之外时，控制台不会显示"左"。

如果您可以查看代码并得到一些帮助，那就太好了。 谢谢。

下面是包含视频源组件的滚动视图。

export default class VideoScrollView extends Component {
render() {
return (
<Viewport.Tracker>
<ScrollView
horizontal={true}
pagingEnabled={true}
scrollEventThrottle={16}
>
<Ad source={Ad28} />
<Ad source={Ad29} />
</ScrollView>
</Viewport.Tracker>
);
}
}

下面是视频组件

const ViewportAwareVideo = Viewport.Aware(Video);
export class VideoAd extends Component {
render() {
this.state = {
paused: true,
visible: false
};
return (
<View style={styles.viewContainer}>
<ViewportAwareVideo
source={this.props.source}
paused={this.state.paused}
style={{ width: "100%", height: "100%" }}
innerRef={ref => (this.player = ref)}
onViewportEnter={() => console.log("entered")}
onViewportLeave={() => console.log("left")}
/>
</View>
);
}
}
const styles = StyleSheet.create({
viewContainer: {
flex: 1,
width: Dimensions.get("window").width,
justifyContent: "center",
alignItems: "center"
}
});

Answer 1

确保您使用的是 Skele 版本1.0.0-alpha.40或更高版本。在该版本下不支持水平滚动视图的视口感知。这里有一个工作零食可以帮助你：https://snack.expo.io/@bevkoski/viewport-感知-懒惰-加载-(水平)。