我正在做反应原生应用程序，其中我有视频卡的列表视图和任何卡的选项卡它在全宽屏幕上打开视频，现在在全宽屏幕上我想要向左/向右滑动以反对/喜欢作为火药全屏视频预览 . 在右边它应该显示喜欢的消息并继续保留在预览屏幕上，在左边它应该显示不喜欢消息将屏幕返回到列表视图 . 现在应该用什么来制作这种方法？附加全屏视频预览的代码..
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View,TouchableOpacity,ImageBackground
} from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right } from 'native-base';
export default class FullScreenVid extends Component {
static navigationOptions = {
headerTintColor: 'white',
headerStyle:{ position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0 }
};
constructor(props) {
super(props);
}
render() {
const {goBack} = this.props.navigation;
return (
<ImageBackground source={{ uri: 'https://i.pinimg.com/564x/47/6b/5c/476b5c4c9725ff3cd4bb3e5f61e4d6c3.jpg'}}
style={styles.backgroundImage}>
<CardItem style={{borderWidth:0, backgroundColor: 'transparent',marginBottom:-23}}>
<Left>
<Thumbnail source={{uri: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg'}} style={{height: 40, width: 40}} />
<Body>
<Text style={styles.uploaderName}>Amrita Arora</Text>
</Body>
</Left>
<Right>
<Text style={styles.likeCounter}>500</Text>
<Icon style={{color:'#f00039'}} name={'md-heart'} size={24}/>
</Right>
</CardItem>
<CardItem style={{borderWidth:0, backgroundColor: 'transparent',marginBottom:30}}>
<Left>
<Text style={styles.uploaderName}>My first composition. #hit and like</Text>
</Left>
<Right>
<Icon style={{color:'#fefefe'}} name={'md-share-alt'} size={28}/>
</Right>
</CardItem>
<CardItem style={{borderWidth:0, backgroundColor: 'transparent',position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Image
source={require('./playVideo.png')}
style={{height: 45, width: 45}}
/>
</CardItem>
</ImageBackground>
)
}
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: null,
height: null,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'transparent'
},
text: {
color: 'white',
fontSize: 32,
},
likeCounter:{
color:'#fefefe',
fontSize: 12,
fontFamily: 'WorkSans-Regular',
},
chatTime:{
color:'#fefefe',
fontSize: 12,
fontFamily: 'WorkSans-Regular',
},
messageCounter:{
color:'#fff',
fontSize: 12,
fontFamily: 'WorkSans-Medium',
backgroundColor: '#05be18',
width: 18,
height: 18,
borderRadius: 9,
textAlign: 'center',
paddingTop: 2
},
uploaderName:{
fontSize: 16,
color: '#fefefe'
},
});