React Native Video 不显示播放器
React Native Video not showing the player
我在使用 属性 paused 和将另一个 View 放入内部时遇到视频播放器问题。
当我尝试将视频放在两个视图之间(以测试滚动)时,第一个视图被播放器隐藏,但第二个视图仍然有效。滚动也能正常工作。
虽然,当我删除第一个视图时,播放器就消失了,但第二个视图仍然存在。当我设置 paused=true 时会发生同样的问题,播放器不会出现。我在这里遇到的另一个问题是,当我尝试使用 Dimensions 时,播放器没有出现。
这里的代码(不使用维度):
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}
/>
好吧,我解开了谜团,我只需要将 Video 标签放在一个 View 中,并在 View 和 Video 中放置相同的高度...现在它可以正常工作了!
我在使用 属性 paused 和将另一个 View 放入内部时遇到视频播放器问题。 当我尝试将视频放在两个视图之间(以测试滚动)时,第一个视图被播放器隐藏,但第二个视图仍然有效。滚动也能正常工作。 虽然,当我删除第一个视图时,播放器就消失了,但第二个视图仍然存在。当我设置 paused=true 时会发生同样的问题,播放器不会出现。我在这里遇到的另一个问题是,当我尝试使用 Dimensions 时,播放器没有出现。 这里的代码(不使用维度):
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}
/>
好吧,我解开了谜团,我只需要将 Video 标签放在一个 View 中,并在 View 和 Video 中放置相同的高度...现在它可以正常工作了!