在 react native 中选择图片答案

【问题标题】：Selecting pictures in react native在 react native 中选择图片
【发布时间】：2020-04-06 02:15:41
【问题描述】：

我正在使用 react native 相机胶卷功能从手机的相机胶卷中检索视频。我可以让视频显示在我的应用程序的画廊中，但我似乎无法弄清楚如何制作一个按钮来打开这个视频并实际播放它。到目前为止，这是我的代码：

import React, {Component} from 'react';
import {
  View,
  Image,
  FlatList,
  PermissionsAndroid,
  Platform,
} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';

class showVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '',
    };
  }

  async componentDidMount() {
    if (Platform.OS === 'android') {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: 'Permission Explanation',
          message: 'ReactNativeForYou would like to access your photos!',
        },
      );
      if (result !== 'granted') {
        console.log('Access to pictures was denied');
        return;
      }
    }

    CameraRoll.getPhotos({
      first: 50,
      assetType: 'All',
    })
      .then(res => {
        this.setState({data: res.edges});
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.data}
          numColumns={3}
          renderItem={({item}) => (
            <Image
              style={{
                width: '33%',
                height: 150,
              }}
              source={{uri: item.node.image.uri}}
            />
          )}
        />
      </View>
    );
  }
}

export default showVideo;

有什么建议或建议吗？我所拥有的只是从我的应用程序中的相机胶卷中提取的视频的静态概览。

【问题讨论】：

标签： react-native

【解决方案1】：

我可能会建议您使用在<Image/> 标签之外添加的<TouchableHighlight /> 来捕捉onPress。这是你想要的吗？它可以知道只需按下图像。

import { TouchableHighlight } from "react-native";
<TouchableHighlight onPress={() => this.functionToPlayVideo(item.node.image.uri)}>
   <Image
              style={{
                width: '33%',
                height: 150,
              }}
              source={{uri: item.node.image.uri}}
            />
</TouchableHighlight>

【讨论】：