React Native-显示相机胶卷视频

时间:2020-07-16 04:45:56

标签: javascript react-native react-native-android react-native-camera

我的RNCameraRoll视频和照片保存在设备的自定义文件夹中,我想在应用程序中显示视频...我使用getPhotos方法显示或创建我的照片库,但对于视频,它仅显示图像。

setIndex = (index) => {
        if (index === this.state.index) {
            index = null
        }
        this.setState({ index })
    }

    getPhotos = () => {
      CameraRoll.getPhotos({
          first: 20,
          groupTypes: 'Album',
          groupName: 'Vocajam Videos',
          assetType: 'Videos'
      })
      .then(r => this.setState({ photos: r.edges}))
  }

我尝试使用视频包播放视频,但是我发现所有视频都在同一时间播放,并且没有视觉效果,我的屏幕空白,只有音频在播放。

我在做什么错了。请先感谢您的帮助。

<ScrollView
                contentContainerStyle={styles.scrollView}>
                {
                    this.state.photos.map((p, i) => {
                      const isSelected = i === this.state.index;
                      const divide = isSelected && this.share === true ? 1 : 3;
                      return (
                        <TouchableHighlight
                          style={{opacity: i === this.state.index ? 0.5 : 1}}
                          key={i}
                          underlayColor='transparent'
                          onPress={() => this.setIndex(i)}
                        >
                          <Image
                            style={{
                              width: width/divide,
                              height: width/divide
                            }}
                            source={{uri: p.node.image.uri}}
                          />
                          
                          <TouchableOpacity style={styles.fullScreen} onPress={() => {this.setState({paused: !this.state.paused})}}>
                            <Video
                              style={{
                                width: width/divide,
                                height: width/divide
                              }}
                              source={{uri: p.node.videoUri}}
                              style={styles.fullScreen}
                              rate={this.state.rate}
                              paused={this.state.paused}
                              volume={this.state.volume}
                              muted={this.state.muted}
                              resizeMode={this.state.resizeMode}
                              onLoad={this.onLoad}
                              onProgress={this.onProgress}
                              onEnd={() => { console.log('Done!') }}
                              repeat={true}
                            />

0 个答案:

没有答案
相关问题