无法在react-native-video项上调用函数

I'm attempting to display an image and call a Video component onPress. The image displays fine, but I cannot get the video to play the same way I can get an alert to show.

我正在尝试显示图像并在onPress上调用视频组件。图像显示正常,但我无法播放视频,就像我可以显示警报一样。

Two images are displayed, if one is clicked then an alert shows. This works fine. If the other image is clicked, then the video should play.

显示两个图像,如果单击一个,则显示警报。这很好用。如果单击其他图像,则应播放视频。

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Image,
  Text,
  Component,
  AlertIOS,
  View,
} = React;

var Video = require('react-native-video');

class Mogul extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.playBroadchurch}>
          <Image
            style={{ height:150, width: 150 }}
            source={{uri: 'http://www.covermesongs.com/wp-content/uploads/2014/05/NotoriousBIG.jpg'}}
          />
        </TouchableHighlight>

        <TouchableHighlight onPress={this.showAlert}>
          <Image
            style={{ height:150, width: 150 }}
            source={{uri: 'http://www.covermesongs.com/wp-content/uploads/2014/05/NotoriousBIG.jpg'}}
          />
        </TouchableHighlight>
      </View>
    );
  }

  playBroadchurch() {
    return (
      <Video source={{uri: "broadchurch"}} // Can be a URL or a local file. 
       rate={1}                   // 0 is paused, 1 is normal. 
       volume={1}                 // 0 is muted, 1 is normal. 
       muted={false}                // Mutes the audio entirely. 
                    // Pauses playback entirely. 
       resizeMode={'contain'}           // Fill the whole screen at aspect ratio. 
       repeat={false}                // Repeat forever. 
       onLoad={this.setDuration}    // Callback when video loads 
       onProgress={this.setTime}    // Callback every ~250ms with currentTime 
       onEnd={this.onEnd}           // Callback when playback finishes 
       style={styles.video} />
    );
  }

  showAlert() {
    AlertIOS.alert('Notorious BIG', 'It was all a DREAM',
      [
        {text: 'Yep', onPress: () => console.log('Yep Pressed!')},
        {text: 'Nope', onPress: () => console.log('Nope Pressed!')},
      ]
    )
  }

};

1 个解决方案

#1

When you return a component from an event handler, React Native doesn't do anything with it. Instead, you should set state on the component, and use that to decide whether to display the video or not. Something like this:

从事件处理程序返回组件时,React Native不会对其执行任何操作。相反,您应该在组件上设置状态,并使用它来决定是否显示视频。像这样的东西:

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Image,
  Text,
  Component,
  AlertIOS,
  View,
} = React;

var Video = require('react-native-video');

class Mogul extends Component {
  constructor() {
    this.playBroadchurch = this.playBroadchurch.bind(this)
    this.state = {showBroadchurch: false};
  }

  render() {
    var videoDisplay;
    if (this.state.showBroadchurch) { // Switch between showing video and placeholder image
      videoDisplay = <Video source={{uri: "broadchurch"}} // Can be a URL or a local file. 
           rate={1}                   // 0 is paused, 1 is normal. 
           volume={1}                 // 0 is muted, 1 is normal. 
           muted={false}                // Mutes the audio entirely. 
                        // Pauses playback entirely. 
           resizeMode={'contain'}           // Fill the whole screen at aspect ratio. 
           repeat={false}                // Repeat forever. 
           onLoad={this.setDuration}    // Callback when video loads 
           onProgress={this.setTime}    // Callback every ~250ms with currentTime 
           onEnd={this.onEnd}           // Callback when playback finishes 
           style={styles.video} />;
    } else {
      videoDisplay = <Image
        style={{ height:150, width: 150 }}
        source={{uri: 'http://www.covermesongs.com/wp-content/uploads/2014/05/NotoriousBIG.jpg'}}
      />;
    }

    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.playBroadchurch}>
          {videoDisplay}
        </TouchableHighlight>

        <TouchableHighlight onPress={this.showAlert}>
          <Image
            style={{ height:150, width: 150 }}
            source={{uri: 'http://www.covermesongs.com/wp-content/uploads/2014/05/NotoriousBIG.jpg'}}
            />
        </TouchableHighlight>
      </View>
    );

  }

  playBroadchurch() {
    this.setState({showBroadchurch: true}); // Update state to show video
  }

  showAlert() {
    AlertIOS.alert('Notorious BIG', 'It was all a DREAM',
      [
        {text: 'Yep', onPress: () => console.log('Yep Pressed!')},
        {text: 'Nope', onPress: () => console.log('Nope Pressed!')},
      ]
    )
  }
};