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 不喜欢这样做，而且它不是很稳定。因此，“快速修复”对您来说是将资产放入项目文件夹中，例如require('./images/tndc-video.mp4').

其他发现

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

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

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

iOS 模拟器屏幕截图，文件名中包含空格 我无法嵌入图像，抱歉。

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

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

文件名中带有 _ 的 iOS 模拟器屏幕截图

我想这可能会有帮助。

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

    <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。