کار با تصاویر در React Native » خبر و ترفند روز

افزودن تصاویر به برنامه React Native آسان است. تمام نکات و نکات مربوط به مؤلفه تصویر داخلی را دریافت کنید.

تصاویر ارزش زیادی را برای برنامه های موبایل فراهم می کنند. آنها می توانند به نشان دادن مفاهیم، انتقال اطلاعات، ایجاد علاقه بصری و ارائه زمینه برای محتوای خاصی که ممکن است نخواهید کاربران برنامه شما از دست بدهند کمک کنند.

React Native Image Component

کامپوننت تصویر React Native جزء پیش‌فرض است که توسط کتابخانه React Native برای ارائه تصاویر در برنامه‌های تلفن همراه شما ارائه می‌شود. این مؤلفه می تواند تصاویر را از منابع محلی و از راه دور بارگیری کند. چندین ابزار برای سفارشی سازی و استایل کردن تصاویر ارائه شده فراهم می کند.

برای استفاده از مولفه تصویر در برنامه خود، Image را از کتابخانه react-native وارد کنید:

import React from 'react';
import { StyleSheet, Image, View } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={require('./assets/my-image.jpg')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
});

در بالا یک جزء برنامه ساده با یک تصویر وجود دارد. کامپوننت Image یک پایه استایل می گیرد که عرض، ارتفاع و شعاع مرزی تصویر را تعیین می کند. همچنین یک منبع منبع دریافت می کند که تصویر را از یک فایل محلی واقع در پوشه “assets” در فهرست برنامه بارگیری می کند. منبع منبع مسیر تصویر را برای گنجاندن تعریف می کند و می تواند منابع تصویر محلی و شبکه/راه دور را بپذیرد.

تصاویر محلی در دستگاه کاربر موجود است و می توانید آنها را به طور موقت یا دائم ذخیره کنید. می توانید تصاویر محلی را در فهرست پروژه برنامه مانند پوشه دارایی ها ذخیره کنید. همچنین می‌توانید تصاویر را خارج از فهرست برنامه، مانند رول دوربین دستگاه یا کتابخانه عکس، پیدا کنید. در اینجا نمونه ای از مسیر منبع به یک تصویر محلی آمده است:

<Image source={{ uri: 'file:///path/to/my-image.jpg' }} />

تصاویر شبکه از طریق وب تحویل داده می شوند. آن‌ها می‌توانند شامل نشانی‌های اینترنتی HTTP/HTTPS یا URI داده‌های کدگذاری‌شده با base64 باشند، که داده‌ها را مستقیماً با استفاده از طرح رمزگذاری Base64 در URL جاسازی می‌کنند.

مطلب مرتبط: چگونه با React Navigation یک سیستم ناوبری موبایل بسازیم

لوازمی برای سفارشی کردن مولفه تصویر

چندین ابزار وجود دارد که می توانید از آنها برای استایل و سفارشی کردن کامپوننت React Native Image استفاده کنید.

تغییر اندازه

پروپ resizeMode تعیین می‌کند که React چگونه باید اندازه و موقعیت یک تصویر را در ظرف خود تغییر دهد. چندین مقدار موجود برای resizeMode وجود دارد که هر کدام به طور متفاوتی بر روی تصویر تأثیر می‌گذارند.

cover: این مقدار تصویر را به طور یکنواخت مقیاس می دهد تا هر دو ابعاد برابر یا بزرگتر از عنصر حاوی آن باشند. سپس تصویر در مرکز ظرف قرار می گیرد. استفاده از این مقدار می تواند منجر به برش تصویر برای حفظ نسبت تصویر شود.
contain: با این کار سعی می شود تصویر را کاملاً در ابعاد ظرف قرار داده و در مرکز آن قرار دهد. با این حال، ممکن است باعث ایجاد فضای خالی در اطراف لبه‌های تصویر شود.
stretch: مقدار کشش تصویر را بدون در نظر گرفتن نسبت ابعاد، به منظور پر کردن کل محفظه کش می دهد. گاهی اوقات باعث تحریف تصویر می شود.
تکرار: این مقدار تصویر را به صورت افقی و عمودی تکرار می کند تا کل ظرف را پر کند.
center: با این کار تصویر را در داخل عنصر کانتینر بدون کوچک کردن آن مرکز می‌کند.

در بارگذاری

این یک تابع تماس است که پس از بارگذاری تصویر اجرا می شود. می‌توانید از آن برای انجام اقداماتی پس از بارگیری تصویر، مانند به‌روزرسانی وضعیت مؤلفه یا نمایش پیام به کاربر، استفاده کنید.

یک خطا

اگر یا زمانی که تصویر بارگذاری نشود، پروپ oneError اجرا می شود. این روشی را برای انجام اقدامات لازم در صورت بروز خطا در حین بارگذاری تصویر فراهم می کند. می توانید یک پیام خطا برای کاربر نمایش دهید یا دوباره سعی کنید تصویر را بارگیری کنید.

مطلب مرتبط: Map-Reduce در مقابل خط لوله تجمع در MongoDB

منبع پیش فرض

این پایه یک تصویر بازگشتی را مشخص می کند تا در صورت بارگیری تصویر اصلی، نمایش داده شود. می‌توانید از آن برای ارائه یک تصویر پیش‌فرض یا یک تصویر مکان‌نما هنگام بارگیری تصویر اصلی استفاده کنید.

مدیریت تصاویر از راه دور از یک API

ممکن است لازم باشد تصویر برنامه خود را از یک API یا سرور راه دور دریافت کنید و آن را در برنامه خود نمایش دهید. برای این منظور می توانید از تابع واکشی داخلی React یا کتابخانه درخواست های API مانند Axios استفاده کنید.

در اینجا مثالی از نحوه واکشی و نمایش تصویر از یک API راه دور با استفاده از تابع fetch آورده شده است:

const [imageUri, setImageUri] = useState(null);

useEffect(() => {
  fetch('https://example.com/api/images/1')
    .then(response => response.json())
    .then(data => setImageUri(data.url))
    .catch(error => console.error(error));
}, []);

return (
  <View>
    {imageUri ? (
      <Image source={{ uri: imageUri }} />
    ) : (
      <Text>Loading...</Text>
    )}
  </View>
);

اجرای این کد در برنامه شما، تصویری را از پیوند API راه دور تنظیم شده دریافت می کند. مثال ابتدا یک متغیر حالت برای imageUri ایجاد می کند. در داخل یک قلاب useEffect، تابع fetch تصویرUri را بازیابی می کند و با استفاده از setImageUri() آن را در متغیر حالت ذخیره می کند.

در نهایت، در حالی که نشانگر بارگذاری نمایش داده می‌شود و منتظر نمایش تصویر است، مؤلفه Image را با پایه منبع تنظیم شده روی URI تصویر ارائه می‌کند.

استفاده از Cache Policy Prop برای کنترل رفتار کش

مرورگر شما می‌تواند تصاویری را که از URLهای راه دور بارگیری می‌کند، ذخیره کند، بنابراین می‌تواند در آینده دوباره آنها را به سرعت بارگیری کند. شما می توانید رفتار تصویر ذخیره شده را با استفاده از حافظه پنهان شخصی سازی کنید. این پایه می تواند مشخص کند که یک مرورگر چگونه باید تصویر را کش کند و چگونه باید آن کش را باطل کند.

مطلب مرتبط: انتقال برنامه از jQuery به React

حافظه پنهان می‌تواند مقادیری مانند پیش‌فرض، بارگذاری مجدد، کشش اجباری و فقط در صورت ذخیره‌سازی را دریافت کند.

در اینجا مثالی از نحوه استفاده از کش برای کنترل رفتار حافظه پنهان یک تصویر آورده شده است:

<Image
  source={{
    uri: 'https://example.com/images/my-image.png',
    cache: 'force-cache',
    cacheKey: 'my-image',
    immutable: true
  }}
/>

ویژگی cache روی “force-cache” تنظیم شده است، که نشان می دهد مرورگر باید تصویر را در صورت موجود بودن از حافظه پنهان بارگیری کند، حتی اگر نسخه کش قدیمی باشد.

یک prop جدید cacheKey نیز در اینجا در حال بازی است. روی “تصویر من” تنظیم شده است، که به عنوان یک کلید کش سفارشی عمل می کند که می توانید بعداً برای ارجاع به تصویر ذخیره شده استفاده کنید.

همچنین، ویژگی غیرقابل تغییر روی true تنظیم شده است، که به مرورگر می‌گوید که این ورودی حافظه پنهان را غیرقابل تغییر در نظر بگیرد و هرگز آن را باطل نکند.

همه چیز درباره تصاویر وجود دارد

مؤلفه React Native Image ابزاری قدرتمند و انعطاف‌پذیر برای نمایش تصاویر، از جمله استایل‌سازی، مدیریت تصاویر از راه دور و کنترل رفتار حافظه پنهان فراهم می‌کند.

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