react-native-video 在我的应用程序中显示空白屏幕，没有任何错误日志

Question

我正在使用 react-native-cli 并且在我的应用程序中，react-native-video 在我的页面中不起作用。它显示空白。我已经运行了 react-native link 命令来链接库，并且在我运行了 react-native run-android 命令之后却显示空白，没有任何错误。我正在使用 react-native v 0.48.4 任何帮助表示赞赏!!

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView,Image, Dimensions,Alert } from 'react-native';
import Video from 'react-native-video';


export default class HomeScreen extends Component {
  constructor(props) {
    super(props);

    this.loadStart = this.loadStart.bind(this);
    this.onLoad = this.onLoad.bind(this);
    this.onProgress = this.onProgress.bind(this);
    this.onEnd = this.onEnd.bind(this);
    this.onError = this.onError.bind(this);
    this.onBuffer = this.onBuffer.bind(this);
    this.onTimedMetadata = this.onTimedMetadata.bind(this);
  };

  loadStart(){
    console.log('loadStart');
  }
  onLoad(){
    console.log('onLoad');
  }

  onProgress(){
    console.log('onProgress');
  }

  onEnd(){
    console.log('onEnd');
  }

  onError(){
    console.log('onError');
  }

  onBuffer(){
    console.log('onBuffer');
  }

  onTimedMetadata(){
    console.log('onTimedMetadata');
  }

  render() {
    return (


        <View style={styles.container}>
          <Image style={styles.logo} source={require('../../images/logo.png')} />
          <View style={styles.Body}>
            <ScrollView>
              <View style={styles.scrollerInner}>
                <Video source={require('../../images/tndc-video.mp4')}   // Can be a URL {uri:'https://www.w3schools.com/html/mov_bbb.mp4'} or a local file require('').   
                  ref={(ref) => {this.player = ref}}               
                  muted={false}                           // Mutes the audio entirely.                  
                  resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
                  repeat={false}                           // Repeat forever.
                  playInBackground={false}                // Audio continues to play when app entering background.
                  playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
                  ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
                  progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
                  onLoadStart={this.loadStart}            // Callback when video starts to load
                  onLoad={this.setDuration}               // Callback when video loads
                  onProgress={this.setTime}               // Callback every ~250ms with currentTime
                  onEnd={this.onEnd}                      // Callback when playback finishes
                  onError={this.videoError}               // Callback when video cannot be loaded
                  onBuffer={this.onBuffer}                // Callback when remote video is buffering
                  onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
                  style={styles.videoPlayer} 
                />                
              </View>
            </ScrollView> 
          </View>
        </View> 


    );
  }
}    

const styles = StyleSheet.create({
  container: {
    flex:1,
    paddingTop:30,
    width:'100%',
  },
  logo:{
    width:260,
    height:66,
    marginBottom:20,
    marginLeft:20,
  },
  Body:{
    width:'100%',
    flexGrow:1,
    height:30
  },
  scrollerInner:{
    paddingHorizontal:20,
  },
  title:{
    fontSize:30,
    color:'#000',
    fontWeight:'bold',
    marginBottom:12,
  },
  description:{
    fontSize:16,
    color:'#000',
    marginBottom:20,
  },
  videoPlayer:{
    width:Dimensions.get('window').width,
    backgroundColor:'#000',
    height:300,
  }, 
});

Answer 1

我认为在您的情况下，主要问题是文件位置。使用 require('../../images/tndc-video.mp4') 您将在项目文件夹之外寻找文件。在我最近的一个项目中，我尝试对其他 js 文件执行此操作。你可以通过在 webpack 配置中放置额外的文件夹来做到这一点，但 react packager 不喜欢那样，而且它不是很稳定。因此，您的“快速修复”是将 Assets 放入项目文件夹中，如 require('./images/tndc-video.mp4')。

其他发现

在试验这个问题时，我发现了一种奇怪的“require”工作方式。最初我认为这整个事情是本地 Assets 的捆绑问题，但实际上它都是关于文件名的。

使用你的代码，我得到了一个黑屏，源代码如下

source={require('./assets/google pixel 2 impressions.mp4')}

iOS simulator screenshot with spaces in file name 我无法嵌入图像，抱歉。

但是当我将文件名更改为使用下划线而不是空格时，一切顺利

source={require('./assets/google_pixel_2_impressions.mp4')}

iOS simulator screenshot with _ in file name

我认为这可能会有所帮助。

容器源代码。我使用了您的样式和辅助函数。

    <Image style={styles.logo} source={require('./assets/so-logo.png')}//source={{uri:"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png"}} 
    />

    <View style={styles.Body}>

    <ScrollView>
    <View style={styles.scrollerInner}>

        <Video 
            // source={require('../images/mov_bbb.mp4')}
            source={require('./assets/google_pixel_2_impressions.mp4')}
            // source={require('./assets/google pixel 2 impressions.mp4')}

            ref={(ref) => {this.player = ref}}               
            muted={false}                           
            resizeMode="cover"                      
            repeat={false}                          
            playInBackground={false}                
            playWhenInactive={false}                
            ignoreSilentSwitch={"ignore"}           
            progressUpdateInterval={250.0}          
            onLoadStart={this.loadStart}            
            onLoad={this.setDuration}               
            onProgress={this.setTime}               
            onEnd={this.onEnd}                      
            onError={this.videoError}               
            onBuffer={this.onBuffer}                
            onTimedMetadata={this.onTimedMetadata}  
            style={styles.videoPlayer} 
        />

    </View>
    </ScrollView>

    </View>
</View>

使用新的 react-native init 项目进行测试并使用react:16.0.0-beta.5，react-native:0.49.1，react-native-video:2.0.0。