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


در این نوشته تصمیم گرفتم در مورد نمایش عکس های گوشی در react native صحبت کنم. اپلیکیشن هایی مانند اپلیکیشن های ویرایش تصویر یا شبکه های اجتماعی به کاربران این امکان را می دهد که از عکس های موجود در گالری خود استفاده کنند. در این نوشته از دسته آموزش react native، من قصد دارم یک نمونه camera roll را به شما نشان دهم که تصاویر دستگاه شما نمایش داده می شود.
CameraRoll یک react native API است که به شما اجازه دسترسی به عکس ها و ویدئو های موجود در گوشی را می دهد.
قبل از هر چیز ، بیایید ببینیم چگونه CameraRoll را در پروژه react native خود راه اندازی کنیم.
CameraRoll را با استفاده از دستور زیر نصب کنید:
1 |
npm install @react-native-community/cameraroll --save |
حالا شما باید اجازه دسترسی به عکس ها و ویدئوهای گوشی در هر دو سیستم عامل Android و Ios را داشته باشید.در Android دسترسی زیر را به فایل AndroidManifest.xml اضافه کنید
1 |
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> |
برای نسخه IOS دو keys به نام های NSPhotoLibraryUsageDescription و NSPhotoLibraryAddUsageDescription در فایل Info.plist اضافه کنید.
برای دریافت عکس ها شما باید CameraRoll.getPhotos() را فراخوانی کنید که یک promise را return می کند.
1 2 3 4 5 6 7 8 9 10 |
CameraRoll.getPhotos({ first: 50, assetType: 'Photos', }) .then(res => { this.setState({ data: res.edges }); }) .catch((error) => { console.log(error); }); |
در قطعه کد زیر نمونه CameraRoll react native نشان داده شده است که در آن پنجاه عکس آخر از دستگاه کاربر با استفاده از FlatList به صورت شبکه ای نشان داده شده است.
class component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
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 برای شما مفید وافع شده باشد. با تشکر از شما برای خواندن این نوشته.
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
نحوه استفاده از فایل env. در react native
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام دوست گرامی .ممنون بابت مقاله مفیدتون
من این کد رو اجرا کردم اما خطای
Access to pictures was denied
سلام وقت بخیر
باید permission دسترسی به gallery رو اضافه کنید