javascript - 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}
        />