Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
zhenghao-z opened this issue Nov 13, 2020 · 4 comments
Closed
Labels
question Further information is requested

Comments

@zhenghao-z
Copy link

我又来了。。

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

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

@A-ANing
Copy link
Owner

A-ANing commented Nov 13, 2020

视频放到scrollview中的吗?

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

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

@zhenghao-z
Copy link
Author

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

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

@A-ANing
Copy link
Owner

A-ANing commented Nov 16, 2020

我这边没出现这种情况,只要手指滑动就会触发,试试关闭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 A-ANing added the question Further information is requested label Nov 23, 2020
@A-ANing
Copy link
Owner

A-ANing commented Nov 23, 2020

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

@A-ANing A-ANing closed this as completed Nov 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants