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

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

{{1}}

无法在react-native-video item

1 个答案: