android - 使用 Flatlist 单击播放按钮即可全屏(横向)播放视频

Question

我已经使用 Flatlist 和下面的库实现了视频滚动。

react-native-video

react-native-orientation

单击播放按钮时，它会在同一帧中启动视频，如下所示:

我想在点击播放按钮时以横向全屏播放视频，在点击关闭按钮时它应该像在纵向模式下一样。

使用的依赖项:

"dependencies": {
    "axios": "^0.18.0",
    "native-base": "^2.7.2",
    "prop-types": "^15.6.2",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-orientation": "^3.1.3",
    "react-native-vector-icons": "^4.6.0",
    "react-native-video": "^3.1.0",
    "react-navigation": "^2.8.0"
  },

当前实现的代码:

return (
      <View style={styles.flatList}>
        <View style={styles.image}>
          <Video
            source={{
              uri: item.video_url
            }}
            ref={ref => {
              this.player = ref;
            }}
            onEnd={() => {}}
            style={styles.videoContainer}
            paused={this.state.paused}
            muted={this.state.muted}
            repeat={this.state.repeat}
            controls={true}
          />
        </View>
        <Text style={styles.itemTitle}> {item.title} </Text>
      </View>
    );

Answer 1

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableHighlight,
  ActivityIndicator,
  SafeAreaView,
  Image,
  Modal,
  Dimensions
} from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import { Container, Content, Header, Body, Title } from "native-base";
import Video from "react-native-video";
import Orientation from "react-native-orientation";
import VideoActions from "../Redux/VideoRedux";
import { connect } from "react-redux";
// Styles
import styles from "./Styles/VideoListScreenStyles";

class LaunchScreen extends Component {
  static navigationOptions = {
    header: null
  };
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      isLoadingMore: false,
      loading: true,
      dataSource: [],
      video_url: "",
      data: [],
      status: false,
      muted: false,
      paused: true,
      repeat: false,
      videos: []
    };
  }

  apiParsing() {
    const axios = require("axios");
    axios
      .get("https://private-c31a5-task27.apiary-mock.com/videos")
      .then(response => {
        // handle success
        this.setState({
          isLoading: false,
          dataSource: response.data.videos,
          data: response.data.videos
        });
        console.log(response.data.videos);
      })
      .catch(error => {
        // handle error
        console.log(error);
      })
      .then(() => {
        // always executed
      });
  }

  fetchMore = () => {
    const data = this.state.data.concat(this.state.dataSource);
    this.setState({
      isLoading: false,
      data: data
    });
  };

  componentDidMount() {
    // this.apiParsing();

    // Orientation.unlockAllOrientations();
    this.props.getVideos();

    Orientation.addOrientationListener(this._orientationDidChange);
  }

  static getDerivedStateFromProps(props, state) {
    props.videos ? { videos: props.videos } : null;
    return null;
  }

  _orientationDidChange = orientation => {
    if (orientation === "LANDSCAPE") {
      console.log("Landscape Mode On");
    } else {
    }
  };

  // componentWillUnmount() {
  //   Orientation.getOrientation((err, orientation) => {
  //     console.log(`Current Device Orientation: ${orientation}`);
  //   });

  //   Orientation.removeOrientationListener(this._orientationDidChange);
  // }

  handlePlayAndPause = item => {
    this.setState(prevState => ({
      paused: !prevState.paused,
      video_url: item.video_url
    }));
  };

  handleVolume = () => {
    this.setState(prevState => ({
      muted: !prevState.muted
    }));
  };

  handleRepeat = () => {
    this.setState(prevState => ({
      repeat: !prevState.repeat
    }));
  };

  handleFullScreenToPortrait = () => {
    Orientation.lockToPortrait();
    this.setState({
      video_url: "",
      paused: true
    });
  };

  handleFullScreenToLandscape = () => {
    this.player.presentFullscreenPlayer();
    Orientation.lockToLandscape();
  };

  onEndVideo = () => {
    this.player.dismissFullscreenPlayer();
    Orientation.lockToPortrait();
    this.setState({
      video_url: "",
      paused: true
    });
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      this.state.isLoadingMore && (
        <View
          style={{
            paddingVertical: 10,
            // borderTopWidth: 1,
            borderColor: "#CED0CE"
          }}
        >
          <ActivityIndicator animating size="large" />
        </View>
      )
    );
  };

  renderItem(item) {
    console.log("Image URL", item.thumbnail_url);
    return (
      <View style={styles.faltList}>
        <View style={styles.image}>
          <Image
            style={styles.image}
            source={{
              uri: item.thumbnail_url
            }}
            resizeMode="cover"
          />
          <View style={styles.controlBar}>
            <MaterialIcons
              name={this.state.paused ? "play-arrow" : "pause"}
              size={45}
              color="white"
              onPress={() => this.handlePlayAndPause(item)}
            />
          </View>
        </View>
        <Text style={styles.welcome}> {item.title} </Text>
      </View>
    );
  }

  render() {
    console.log("Image URL", this.props.videos);
    if (this.state.isLoading) {
      return (
        <View style={styles.activityIndicator}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <Container>
        <Header>
          <Body>
            <Title> Videos </Title>
          </Body>
        </Header>
        <View style={styles.container}>
          <SafeAreaView>
            {this.state.video_url ? (
              <Video
                source={{
                  uri: this.state.video_url
                }}
                ref={ref => {
                  this.player = ref;
                }}
                onEnd={this.onEndVideo}
                onLoadStart={this.handleFullScreenToLandscape}
                // style={styles.videoContainer}
                paused={this.state.paused}
                muted={this.state.muted}
                repeat={this.state.repeat}
                onFullscreenPlayerDidDismiss={() =>
                  this.handleFullScreenToPortrait()
                }
              />
            ) : null}
            <FlatList
              data={this.props.videos}
              renderItem={({ item }) => this.renderItem(item)}
              keyExtractor={(item, index) => index.toString()}
              showsVerticalScrollIndicator={false}
              showsHorizontalScrollIndicator={false}
              ListFooterComponent={this.renderFooter}
              onEndReached={() =>
                this.setState({ isLoadingMore: true }, () => this.fetchMore())
              }
              onEndReachedThreshold={0.01}
            />
          </SafeAreaView>
        </View>
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  videos: state.videos.videos
});

const mapDispatchToProps = dispatch => ({
  getVideos: () => dispatch(VideoActions.videoRequest())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LaunchScreen);