无法调用 react-native-video 项目的功能

Question

我正在尝试显示图像并调用视频组件 onPress。图像显示正常，但我无法像显示警报那样播放视频。

显示两张图片，如果单击其中一张，则会显示警告。这很好用。如果单击另一张图片，则应播放视频。

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!')},
      ]
    )
  }

};

Answer 1

当您 return 来自事件处理程序的组件时，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!')},
      ]
    )
  }
};

无法调用 react-native-video 项目的功能

Can't call function on react-native-video item

javascript

react-native