React Native 视频无法播放本地文件

Question

我正在尝试从本地文件系统播放视频，视频播放器会显示，但视频甚至不会在手机上显示，或者甚至无法播放，我做错了什么吗？我确切知道我的文件所在的位置，但它无法播放它实际上是一个只有空白屏幕的视频播放器。？

这是我下面使用的代码，显示了一个空的视频播放器

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { Video } from 'expo';
import { MaterialIcons, Octicons } from '@expo/vector-icons';


export default class App extends React.Component {
  state = {
    mute: false,
    shouldPlay: true,
  }

  handlePlayAndPause = () => {  
    this.setState((prevState) => ({
       shouldPlay: !prevState.shouldPlay  
    }));
  }

  handleVolume = () => {
    this.setState(prevState => ({
      mute: !prevState.mute,  
    }));
  }



  render() {
    const { width } = Dimensions.get('window');

    return (
      <View style={styles.container}>
        <View>
            <Text style={{ textAlign: 'center' }}> spiderman </Text>
            <Video
              source={{ uri: 'file://C:\Windows\System32\avenger\spiderman.mp4' }}
              shouldPlay={this.state.shouldPlay}
              resizeMode="cover"
              style={{ width, height: 300 }}
              isMuted={this.state.mute}
            />
            <View style={styles.controlBar}>
              <MaterialIcons 
                name={this.state.mute ? "volume-mute" : "volume-up"}
                size={45} 
                color="white" 
                onPress={this.handleVolume} 
              />
              <MaterialIcons 
                name={this.state.shouldPlay ? "pause" : "play-arrow"} 
                size={45} 
                color="white" 
                onPress={this.handlePlayAndPause} 
              />
            </View>
          </View>
      </View>
    );
  }
  }


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  controlBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 45,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  }
});

Answer 1

对于本地文件，您require不应该使用uri我尝试重现您的代码，但我不确定file:React Native 中的语法。所以我改用相对路径

        <Video
          source={require('./utils/video_2018-08-16_14-12-06.mp4')}
          shouldPlay={this.state.shouldPlay}
          resizeMode="cover"
          style={{ width, height: 300 }}
          isMuted={this.state.mute}
        />