【问题标题】:React Native Video not showing the playerReact Native Video 不显示播放器
【发布时间】:2020-01-28 18:18:33
【问题描述】:

在使用属性 paused 以及将其放入另一个 View 时,我遇到了视频播放器问题。 当我尝试将视频放在两个视图之间(以测试滚动)时,第一个视图被播放器隐藏,但第二个视图保持工作。滚动也可以正常工作。 虽然,当我删除第一个视图时,播放器就消失了,但第二个视图仍然存在。当我输入 paused=true 时,也会发生同样的问题,播放器只是没有出现。我在这里遇到的另一个问题是当我尝试使用维度时,播放器没有出现。 这里的代码(不使用维度):

import Video from 'react-native-video';

import {
    Text,
    StyleSheet,
    View,
    Dimensions,
    ScrollView
} from 'react-native';

import api from '../services/api';
import JojoVideo from '../assets/jojo_op_1.mp4';
import Icon from 'react-native-vector-icons/FontAwesome';

export default function Videos({ navigation }) {
    /* state = {
         paused: true
     };


     position = {
         start: null,
         end: null
     };

    const [state, setState] = useState({ paused: true });
    const [postion, setPosition] = useState({ start: null, end: null });
    // const {width} = Dimensions.get('window');

    return (
        <View style={styles.container}>
            <ScrollView style={styles.scrollView}>
                {/* <View style={styles.fakeContent}></View> */}
                <Video
                    source={JojoVideo}
                    ref={(ref) => {
                        player = ref
                    }}
                    style={styles.video}
                    paused={state.paused}
                />
                <View style={styles.fakeContent}></View>
            </ScrollView>
        </View>
    );

}

样式表:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#5EFFB1',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 30
    },
    scrollView: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flex: 1
    },
    video: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0
    },
    fakeContent: {
        height: 850,
        backgroundColor: "#CCC",
        paddingTop: 250,
        alignItems: "center"
    },
});

当我尝试测试维度时,标签会是这样的:

               <Video
                   source={JojoVideo}
                   ref={(ref) => {
                       player = ref
                   }}
                   style={styles.video, width}
                   paused={state.paused}
               /> 

【问题讨论】:

    标签: android ios react-native cross-platform react-native-video


    【解决方案1】:

    好吧,我解开了这个谜,我只需要将 Video 标签放在 View 中,并在 View 和 Video 中放置相同的高度...现在它可以正常工作了!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-01-09
      • 2019-12-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-24
      • 2022-11-10
      相关资源
      最近更新 更多