نمایش عکس های گوشی در react native (ری اکت نیتیو)

در این نوشته تصمیم گرفتم در مورد نمایش عکس های گوشی در react native صحبت کنم. اپلیکیشن هایی مانند اپلیکیشن های ویرایش تصویر یا شبکه های اجتماعی به کاربران این امکان را می دهد که از عکس های موجود در گالری خود استفاده کنند. در این نوشته از دسته آموزش react native، من قصد دارم یک نمونه camera roll را به شما نشان دهم که تصاویر دستگاه شما نمایش داده می شود.

CameraRoll یک react native API است که به شما اجازه دسترسی به عکس ها و ویدئو های موجود در گوشی را می دهد.

قبل از هر چیز ، بیایید ببینیم چگونه CameraRoll را در پروژه react native خود راه اندازی کنیم.

CameraRoll را با استفاده از دستور زیر نصب کنید:

npm install @react-native-community/cameraroll --save

1	npm install @react-native-community/cameraroll --save

حالا شما باید اجازه دسترسی به عکس ها و ویدئوهای گوشی در هر دو سیستم عامل Android و Ios را داشته باشید.در Android دسترسی زیر را به فایل AndroidManifest.xml اضافه کنید

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

1	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

برای نسخه IOS دو keys به نام های NSPhotoLibraryUsageDescription و NSPhotoLibraryAddUsageDescription در فایل Info.plist اضافه کنید.

برای دریافت عکس ها شما باید CameraRoll.getPhotos() را فراخوانی کنید که یک promise را return می کند.

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

CameraRoll.getPhotos({

first: 50,

assetType: 'Photos',

})

.then(res => {

this.setState({ data: res.edges });

})

.catch((error) => {

console.log(error);

});

در قطعه کد زیر نمونه CameraRoll react native نشان داده شده است که در آن پنجاه عکس آخر از دستگاه کاربر با استفاده از FlatList به صورت شبکه ای نشان داده شده است.

class component

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

export default class camera 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: 'Photos',
      })
      .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>
    );
  }
}

import React, { Component } from 'react';

import { View, Image, FlatList, PermissionsAndroid, Platform } from 'react-native';

import CameraRoll from "@react-native-community/cameraroll";

export default class camera 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: 'Photos',

})

.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>

);

}

Function Component

import React, {useEffect, useState} from 'react';
import {
  View,
  Image,
  FlatList,
  PermissionsAndroid,
  Platform,
} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/new-imagebackground-component-in-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/new-imagebackground-component-in-react-native-300x162.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">کامپوننت جدید ImageBackground در React Native</div></div></div><div class="ctaButton"></div></div></a></div>
const Camera = () => {
  const [data, setData] = useState('');
  const getPhotos = () => {
    CameraRoll.getPhotos({
      first: 50,
      assetType: 'Photos',
    })
      .then((res) => {
        setData(res.edges);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const askPermission = async () => {
    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;
      } else {
        getPhotos();
      }
    } else {
      getPhotos();
    }
  };

  useEffect(() => {
    askPermission();
  }, []);

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

export default Camera;

import React, {useEffect, useState} from 'react';

import {

View,

Image,

FlatList,

PermissionsAndroid,

Platform,

} from 'react-native';

import CameraRoll from '@react-native-community/cameraroll';

const Camera = () => {

const [data, setData] = useState('');

const getPhotos = () => {

CameraRoll.getPhotos({

first: 50,

assetType: 'Photos',

})

.then((res) => {

setData(res.edges);

})

.catch((error) => {

console.log(error);

});

};

const askPermission = async () => {

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;

} else {

getPhotos();

}

} else {

getPhotos();

}

};

useEffect(() => {

askPermission();

}, []);

return (

<View>

<FlatList

data={data}

numColumns={3}

renderItem={({item}) => (

<Image

style={{

width: '33%',

height: 150,

}}

source={{uri: item.node.image.uri}}

)}

</View>

);

};

export default Camera;

امیدوارم آموزش نمایش عکس های گوشی در react native برای شما مفید وافع شده باشد. با تشکر از شما برای خواندن این نوشته.

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

aazam گفت:

ژانویه 20, 2022 در 3:28 ب.ظ

سلام دوست گرامی .ممنون بابت مقاله مفیدتون

من این کد رو اجرا کردم اما خطای

Access to pictures was denied

پاسخ
- علی گفت:
  
  ژانویه 20, 2022 در 6:57 ب.ظ
  
  سلام وقت بخیر
  باید permission دسترسی به gallery رو اضافه کنید
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نحوه استفاده از فایل env. در react native

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ