[英]Issues with React native video playback and image cover
I am trying to recreate the snapchat discover, I have applied the code below and when I click on my cover image nothing happens. 我正在尝试重新创建“发现”,我已经应用了下面的代码,当我单击封面图像时,没有任何反应。 If I manually set my state to true, flatlist renders the video and I can play any of the videos.
如果我手动将状态设置为true,则平面列表会呈现视频,并且我可以播放任何视频。 I would like to click on the image and switch to the video.
我想单击图像并切换到视频。
class Games extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
playVideo() {
this.setState({ show: true });
}
render() {
const renderVideo = ({ item, index }) => {
return (
<TouchableOpacity onPress={this.playVideo()}>
{this.state.show ?
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: 'https://gcs-vimeo.akamaized.net/exp=1549330881~acl=%2A%2F671569878.mp4%2A~hmac=17bb2f7f2be7c20848448cfc810096c82cf7e7715b7fa43566c4a899912fa42b/vimeo-prod-skyfire-std-us/01/4838/7/199191069/671569878.mp4',
},
}}
isPortrait
playFromPositionMillis={0}
/>
:
<View
style={[
{ width: Dimensions.get('window').width / 2.2 },
{ height: 250,
margin: 8
}]}
>
<Image
square
source={{ uri: 'https://pixabay.com/get/ea34b90a29f3013ed1534705fb094797e771e0dd11b50c4090f4c87aa5e9bcbfdd/training-3185170_1920.jpg' }}
key={index}
style={{
flex: 1,
height: undefined,
width: undefined,
borderRadius: 10,
borderWidth: 0.5,
borderColor: '#dddddd'
}}
/>
</View>}
</TouchableOpacity>
);
};
if (this.props.game.isLoading) {
return (
<Loading />
);
}
else if (this.props.game.errMess) {
return (
<View>
<Text>{this.props.game.errMess}</Text>
</View>
);
}
else {
return (
<FlatList
data={this.props.events.events}
renderItem={renderVideo}
keyExtractor={item => item.id.toString()}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.container}
numColumns={2}
/>
);
}
}
}
I am new to react-native so feel free to call me out on any mistake you may notice in my code. 我是本机反应的新手,所以如果您在我的代码中发现任何错误,请随时致电我。
What comes up when you console log the state of "show"? 当您控制台记录“显示”状态时会发生什么?
I believe you need to bind "this" so it's defined when clicking the playVideo. 我相信您需要绑定“ this”,以便在单击playVideo时对其进行定义。
class Games extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
this.playVideo = this.playVideo.bind(this); // Bind this to playVideo
}
playVideo() {
this.setState({ show: true });
}
render() {
const renderVideo = ({ item, index }) => {
return (
<TouchableOpacity onPress={this.playVideo}> // Here we pass the reference to the function because we want onPress to handle this
{this.state.show ?
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: 'https://gcs-vimeo.akamaized.net/exp=1549330881~acl=%2A%2F671569878.mp4%2A~hmac=17bb2f7f2be7c20848448cfc810096c82cf7e7715b7fa43566c4a899912fa42b/vimeo-prod-skyfire-std-us/01/4838/7/199191069/671569878.mp4',
},
}}
isPortrait
playFromPositionMillis={0}
/>
:
<View
style={[
{ width: Dimensions.get('window').width / 2.2 },
{ height: 250,
margin: 8
}]}
>
<Image
square
source={{ uri: 'https://pixabay.com/get/ea34b90a29f3013ed1534705fb094797e771e0dd11b50c4090f4c87aa5e9bcbfdd/training-3185170_1920.jpg' }}
key={index}
style={{
flex: 1,
height: undefined,
width: undefined,
borderRadius: 10,
borderWidth: 0.5,
borderColor: '#dddddd'
}}
/>
</View>}
</TouchableOpacity>
);
};
if (this.props.game.isLoading) {
return (
<Loading />
);
}
else if (this.props.game.errMess) {
return (
<View>
<Text>{this.props.game.errMess}</Text>
</View>
);
}
else {
return (
<FlatList
data={this.props.events.events}
renderItem={renderVideo}
keyExtractor={item => item.id.toString()}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.container}
numColumns={2}
/>
);
}
}
}
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
name: ''
};
}
render() {
const renderVideoPic = ({ item, index }) => {
return (
<TouchableOpacity onPress={() => this.setState({ isModalVisible: !this.state.isModalVisible, name: item.first_name })}>
<View
style={[
{ width: Dimensions.get('window').width / 2.2 },
{ height: 250,
margin: 8
}]}
>
<Image
square
source={{ uri: item.image }}
key={index}
style={{
flex: 1,
height: undefined,
width: undefined,
borderRadius: 10,
borderWidth: 0.5,
borderColor: '#dddddd'
}}
/>
</View>
</TouchableOpacity>
);
};
if (this.props.game.isLoading) {
return (
<Loading />
);
}
else if (this.props.game.errMess) {
return (
<View>
<Text>{this.props.game.errMess}</Text>
</View>
);
}
else {
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.props.events.events}
renderItem={renderVideoPic}
keyExtractor={item => item.id.toString()}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.container}
numColumns={2}
/>
<TouchableOpacity>
<Modal
isVisible={this.state.isModalVisible}
//animationOut='slideOutDown'
//onBackdropPress={() => this.setState({ isVisible: false })}
backdropOpacity={1}
backdropColor='white'
style={{
justifyContent: 'center',
alignItems: 'center',
paddingTop: 15
}}
onSwipe={() => this.setState({ isModalVisible: false })}
swipeDirection="down"
swipeThreshold={200}
>
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
isMuted: false,
source: {
uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
},
}}
isPortrait
playFromPositionMillis={0}
showFullscreenButton
//switchToLandscape={() => ScreenOrientation.allow(ScreenOrientation.Orientation.LANDSCAPE)}
//switchToPortrait={() => ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT)}
/>
<Text>{this.state.name}</Text>
</Modal>
</TouchableOpacity>
</View>
);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.