React 本机视频播放和图像覆盖的问题答案

【问题标题】：Issues with React native video playback and image coverReact 本机视频播放和图像覆盖的问题
【发布时间】：2019-06-28 18:48:21
【问题描述】：

我正在尝试重新创建 snapchat 发现，我已经应用了下面的代码，当我点击我的封面图片时没有任何反应。如果我手动将状态设置为 true，flatlist 会呈现视频，我可以播放任何视频。我想点击图片并切换到视频。

 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}
          />
      );
    }
  }
}

我是 react-native 的新手，如果您在我的代码中发现任何错误，请随时与我联系。

【问题讨论】：

标签： reactjs react-native video expo video-player

【解决方案1】：

当您在控制台记录“show”状态时会出现什么情况？

我相信您需要绑定“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}
          />
      );
    }
  }
}

【讨论】：

控制台日志显示我的初始状态为 false，但是当我单击状态没有改变时，绑定“this”也不起作用
@ChoCho 您是否也将 onPress 从 this.playVideo() 更新为 this.playVideo？
我做到了，但它不起作用，我通过使用模态使其工作，将在一些时间发布解决方案。

【解决方案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>


      );
    }
  }
}

【讨论】：