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配置中添加其他文件夹来做到这一点，但反应包装商并不喜欢它并且它不是非常稳定。所以＆＃34;快速修复＆＃34;对于您来说，将资产放在项目文件夹中，如require('./images/tndc-video.mp4')。

其他调查结果

在尝试这个问题时，我发现了一种奇怪的方式，＆＃34;需要＆＃34;作品。最初我认为这一切都是本地资产的捆绑问题，但实际上它都是关于文件名的。

使用你的代码我得到了一个带有以下来源的黑屏

source = {require（＆＃39; ./ assets / google pixel 2 impressions.mp4＆＃39;）}

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

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

源= {需要（＆＃39; ./资产/ google_pixel_2_impressions.mp4＆＃39;）}

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项目进行测试并做出反应：16.0.0-beta.5，react-native：0.49.1，react-native-video：2.0.0。

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

1 个答案: