Как нуб, я пытаюсь создать приложение, которое воспроизводит видео (локальные видео) в окне просмотра.Пользователь прокручивает влево и вправо, и когда видео просматривается, оно воспроизводится автоматически.Если видео не видно, оно перестает воспроизводиться.
Я попытался выполнить следующий урок: https://codedaily.io/courses/4/Fundamentals-of-React-Native-Video/37
Изменил все расчеты для работы с шириной вместо высоты, но не сработал.
Тогда я наткнулся на Skele-Components: https://blog.netcetera.com/viewport-aware-components-for-react-native-apps-a28ea605e89e
Это проверяет, находится ли компонент в поле зрения или нет.В качестве теста я поместил 2 видео в моем ScrollView.Прокрутите, я console.logged "Введен", когда видео входит, и "Влево", когда видео покидает область просмотра.Окно просмотра четко показывает одно видео, но консоль записывает 2 "Введено".Сказать мне, что логика не работает.Также консоль не отображает «Left», когда видео прокручивается вне поля зрения.
Если бы вы могли взглянуть на код, и некоторая помощь была бы полезна.спасибо.
Ниже приведен вид прокрутки, содержащий компонент источника видео.
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"
}
});