在 react native 中选择图片

Posted 2023-03-11

【中文标题】在 react native 中选择图片

【英文标题】：Selecting pictures in 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;

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

【参考方案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>