如何使用 react-native-image-picker 显示视频

Question

我正在使用react-native-ImagePicker 从我的手机中选择视频。所以我使用了下面的代码，

const options = {
      title: 'Video Picker', 
      mediaType: 'video', 
      storageOptions:{
        skipBackup:true,
        path:'images'
      }
};

这里的问题是我可以录制/选择视频，我无法在 <View> 中显示。我搜索了很多网站，几乎花了 5 个小时，但仍然无法找到解决方案。有人可以帮助/澄清我吗？来自this git_hub站点的代码参考。

Answer 1

import ImagePicker from 'react-native-image-picker';
import Video from 'react-native-video';

class MyComponent extends Component{

constructor(props){
  super(props);

 this.state = {
     videoSource:'',
   };
}

const options2 = {
  title: 'Select video',
   mediaType: 'video',
  path:'video',
  quality: 1
};


selectVideo = () => {


ImagePicker.showImagePicker(options2, (response) => {
console.log('Response = ', response);

if (response.didCancel) {
  console.log('User cancelled image picker');
} else if (response.error) {
  console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
  console.log('User tapped custom button: ', response.customButton);
} else {
  const source = { uri: response.uri };


  this.setState({videoSource: source})


}
});


}

render(){
return(

<View>

    <Video source={this.state.videoSource}   // Can be a URL or a local file.
           ref={(ref) => {
             this.player = ref
           }}                                      // Store reference
           onBuffer={this.onBuffer}                // Callback when remote video is buffering
           onError={this.videoError}               // Callback when video cannot be loaded
           style={styles.backgroundVideo}
           controls={true}
           fullscreen={true}
           style={styles.uploadImage} />


    <Button small primary onPress={this.selectVideo}>
      <Text>Select Video</Text>
    </Button>



</View>

);
}



}

Answer 2

您可以使用 this package 并将您从图像选择器中检索到的 uri 传递给它，如下所示：

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
});

例子：

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
    this.setState({ uri })
});

 ...

<View style={{ flex: 1 }}>
   <Video source={{uri: this.state.uri}}
</View>