自定义react-native-video上的X控件

import React from 'react';
import { TouchableOpacity, Image, StyleSheet } from 'react-native';

class CloseButton extends React.Component {
  handlePress = () => {
    // 在这里编写按钮点击事件的处理逻辑
    // 例如关闭视频、隐藏播放器等
  };

  render() {
    return (
      <TouchableOpacity onPress={this.handlePress} style={styles.container}>
        <Image source={require('path/to/close_icon.png')} style={styles.icon} />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 10,
    right: 10,
    zIndex: 1,
  },
  icon: {
    width: 30,
    height: 30,
  },
});

export default CloseButton;

import React from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';
import CloseButton from './CloseButton';

class VideoPlayer extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Video source={require('path/to/video.mp4')} style={styles.video} />
        <CloseButton />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    flex: 1,
  },
});

export default VideoPlayer;