response-native-video показывает пустой экран в моем приложении без журнала ошибок

Question

Я использую react-native-cli и в моем приложении видео-реакция не работает на моей странице. Это показывает пустое пространство. Я уже бегал react-native link Команда связать библиотеки и после того, как я запустил react-native run-android Команда, но показывает пустое пространство без каких-либо ошибок. Я использую response-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, но реагирующему упаковщику это не понравилось, и он не был очень стабильным. Итак, "быстрое решение" для вас - поместить ресурсы в папку проекта, например require('./images/tndc-video.mp4'),

Дополнительные выводы

Экспериментируя с этой проблемой, я обнаружил странный способ работы "require". Сначала я думал, что все это связано с локальными ресурсами, но на самом деле все дело в именах файлов.

Используя ваш код, я получил черный экран со следующим источником

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

Снимок экрана симулятора iOS с пробелами в имени файла Я не смог вставить изображение, извините.

Но когда я изменил имя файла, чтобы использовать подчеркивание вместо пробела, все прошло хорошо

источник = {требуется ("./ активы /google_pixel_2_impressions.mp4')}

Скриншот симулятора iOS с _ в имени файла

Я думаю, что это может быть полезно.

Контейнер исходного кода. Я использовал ваши стили и вспомогательные функции.

    <Image style={styles.logo} source={require('./assets/so-logo.png')}//source={{uri:"https://cdn.sstatic.net/Sites/stackru.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, реакция-нативная: 0.49.1, реакция-нативная-видео: 2.0.0.