A-ANing / react-native-rn-videoplayer

基于react-native-video的视频播放器(上下滑动改变音量屏幕亮度,缓冲进度,双击暂停等ios Android)
95 stars 40 forks source link

在ScrollView中使用,全屏模式下 手势、进度条控制失效 #16

Closed zhenghao-z closed 3 years ago

zhenghao-z commented 3 years ago

我又来了。。

在ScrollScoView中嵌套使用,点击全屏后, 全屏模式下手势、进度条控制失效了,上下滑动时ScrollScoView优先响应了,造成了页面的上下滚动

我是个小白,个人猜测是,是否在全屏模式中,video的手势响应优先级应该高于ScrollScoView?

A-ANing commented 3 years ago

视频放到scrollview中的吗?

是否一个滚动列表里面只有一个视频,而且视频在scrollview的顶部,是的话 你完全可以把视频放到 scrollview外面;

如果真的要scrollview嵌套视频,你可以在全屏的时候通过全屏回调将scrollview的滚动禁用掉,scrollview有个scrollEnabled属性

zhenghao-z commented 3 years ago

感谢老哥,我真的是个菜鸡,全屏回调禁用后可以手势滑动。

不过有一个疑问 我测试了几台手机,这个手势是需要短暂长按(手指短暂停留后)滑动后才能触发, 可能是习惯了b站的手势,b站是接触到屏幕,不需要这个短暂停留的过程即可触发。

A-ANing commented 3 years ago

我这边没出现这种情况,只要手指滑动就会触发,试试关闭dubug模式;

看看我这边的效果 国内关闭vpn

这是我的代码

import React, { Component } from 'react';
import {
    Text,
    View,
    ScrollView,
    Dimensions,
    StyleSheet
} from 'react-native';
import VideoPlayer from 'react-native-rn-videoplayer';
const { width } = Dimensions.get('window');

export default class Demo extends Component {
    state = {
        scrollEnabled: true
    }

    onWindowChange=(e)=>{
        this.setState({scrollEnabled:e=="full"?false:true})
    }

    render() {
       const {scrollEnabled}=this.state

        return (
            <ScrollView style={{ backgroundColor: "#fff" }} scrollEnabled={scrollEnabled}>

                <VideoPlayer
                    url={"http://xudaxianer.cn/video/6433a393957412d24852d669ee91d829.mp4"}
                    autoPlay={true}
                    ref={(ref) => this.player = ref}
                    lockControl={true}//控件锁定功能 v2.0.6增加
                    moreSetting={() => null}//右上角更多按钮 输出null则不显示
                    onWindowChange={this.onWindowChange}
                />

                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>
                <View style={styles.View}><Text>其他view</Text></View>

            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    View: { width: width, backgroundColor: "pink", marginVertical: 50,paddingVertical:20,alignItems:'center' },
})
A-ANing commented 3 years ago

需要更多信息 或者提供代码