Question

反应原生的新手。通过内部API提供数据。我正在尝试在应用中呈现视频。要做到这一点，似乎大多数人使用react-native-video（这是我目前正在尝试做的）或使用内置的WebView组件。

我无法访问该组件。我安装了react-native-video，并根据设置说明通过rnpm进行链接。我把它包含在项目中，就像我发现使用它的其他几个应用程序一样：

import Video from 'react-native-video';

当我尝试使用

时

<Video
  source={{uri: video.url}}
/>

我在iOS模拟器中看到了几个不同的错误，但目前看到Cannot read property 'Constants' of undefined。当我删除<Video />标记时，我没有收到错误。无法弄清楚我在设置方面做错了什么。所以我的问题基本上是（1）这就是我应该如何尝试用反应本机包含视频和（2）假设它是，我做错了什么。

如果需要其他信息，请与我们联系。反应原生的新手。

更新：卸载并重新安装解决了错误。

Answer 1

安装这三个命令

1：-react-native-element

2：-react-native-vector-icons

3：-react-native-video

以及运行后：-react-native link


import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, } from 'react-native';
import { Icon } from 'react-native-elements';
import Video from 'react-native-video';
export default class App extends Component {
  state = {
    rate: 1,
    volume: 1,
    muted: false,
    resizeMode: 'contain',
    duration: 0.0,
    currentTime: 0.0,
    paused: true,
  };

  video: Video;

  onLoad = (data) => {
    this.setState({ duration: data.duration });
  };

  onProgress = (data) => {
    this.setState({ currentTime: data.currentTime });
  };

  onEnd = () => {
    this.setState({ paused: true })
    this.video.seek(0)
  };

  onAudioBecomingNoisy = () => {
    this.setState({ paused: true })
  };

  onAudioFocusChanged = (event: { hasAudioFocus: boolean }) => {
    this.setState({ paused: !event.hasAudioFocus })
  };

  renderVideoView = () => {
    const { fullScreen } = styles;
    return (
      <Video
        ref={(ref: Video) => { this.video = ref }}
        source={require('Your Video Url OR Path Hear')}
        style={fullScreen}
        rate={this.state.rate}
        paused={this.state.paused}
        volume={this.state.volume}
        muted={this.state.muted}
        resizeMode={this.state.resizeMode}
        onLoad={this.onLoad}
        onProgress={this.onProgress}
        onEnd={this.onEnd}
        onAudioBecomingNoisy={this.onAudioBecomingNoisy}
        onAudioFocusChanged={this.onAudioFocusChanged}
        repeat={false}
      />
    )
  }
  render() {
    return (
      <View style={styles.container}>
        {this.renderVideoView()}
        <TouchableOpacity onPress={() => this.setState({ paused: !this.state.paused })}>
          {
            this.state.paused == true ?
              <Icon name='caretright' type='antdesign' color='#09548c' /> :
              <Icon name='pause' type='Foundation' color='#09548c' />
          }
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  fullScreen: {
    width: '100%', height: 233,
  },
});

在反应原生的IOS应用程序中显示视频

1 个答案: