next

Edit

Зураг

Статик зургийн нөөц

iOS, Android апп доторх зураг болон бусад медиаг удирдаж зохицуулах нэгдсэн арга React Native-т байдаг. Аппдаа байнгын хөдөлгөөнгүй зураг нэмэх бол эх кодын хаа нэгтэй байрлуулан доорх байдлаар зааж өгнө:

<Image source={require('./my-icon.png')} />

Зургийн нэр нь JS modules шиг зохицуулагддаг. Дээрх жишээ дээр packager нь шаардаж байгаа компоненттойгоо адилхан фолдероос my-icon.png гэж хайна. Мөн my-icon.ios.png болон my-icon.android.png-тай бол packager нь уг платформд тохирох зөв файлыг сонгоно.

Та мөн өөр өөр дэлгэцийн нягтаршилд зориулсан зургийг сонгохдоо @2x болон @3x гэсэн дагаврыг ашиглах боломжтой. Хэрэв танд доорх файл бүтэц байгаа бол:

.
├── button.js
└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

...button.js код нь:

<Image source={require('./img/check.png')} />

...packager нь төхөөрөмжийн дэлгэцийн нягтралд тохируулан зургийг нэгтгэж гаргана. Жишээ нь check@2x.png нь iPhone 7 дээр ашиглагдах бол check@3x.png нь iPhone 7 Plus эсвэл Nexus 5 дээр ашиглагдана. Хэрэв дэлгэцийн нягтралд таарах зураг байхгүй бол хамгийн ойролцоо боломжит хувилбарыг сонгодог.

Windows дээр шинэ зургууд нэмсэн бол packager-аа дахин эхлүүлэх шаардлагатай болно.

Хэдэн давуу талыг дурдвал:

  1. iOS болон Android дээр ижил системтэй.
  2. Зургууд нь JavaScript кодтой адилхан фолдерт байна. Компонентууд нь бие даасан.
  3. Нэгдсэн нэрийн орон зай (Global namespace) байхгүй. Нэр зөрчилдөнө гэж санаа зовох хэрэггүй.
  4. Үнэхээр ашиглагдах зургууд л апп-т орох болно.
  5. Зураг нэмж, өөрчлөх бүртээ дахин хөрвүүлэх шаардлагагүй. Зүгээр л симялатороо refresh хийхэд л хангалттай.
  6. Packager нь зургийн харьцааг мэдэх бөгөөд код дотор дахин оруулах шаардлагагүй.
  7. Зургууд нь npm package-аар дамжин хүргэгдэнэ.

Зөв ажиллуулахын тулд require гэсэн доторх зургийн нэр өөрчлөгдөхгүй байх ёстой.

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

Зургийн эх сурвалж бүхий мэдээлэлд өргөн өндөр хэмжээ байх шаардлагатайг анхаарна уу. Хэрэв та зургийн харьцааг динамикаар тохируулах гэж байгаа бол (жишээ нь flex ашиглан) style атрибут дотор тохируулж өгөх { width: undefined, height: undefined } хэрэгтэй.

Статик, зургийн бус эх үүсвэр

Дээр дурдсан require синтакс нь аудио, видео эсвэл файлыг агуулж байж болно. .mp3, .wav, .mp4, .mov, .html, .pdf нь түгээмэл файлын төрлүүд юм. Бүрэн жагсаалтыг packager defaults гэснээс харна уу.

Та өөр төрлийн файлын төрлийг дэмждэг болгохыг хүсвэл packager config файл үүсгэх хэрэгтэй.(packager config file гэсэн рүү орж хэрхэн тохируулах тухай бүрэн жагсаалт бүхий мэдээллийг харна уу). Анхаарах нэг зүйл нь видеонд 'flexGrow'-ын оронд бүрэн байрлалыг тогтоож өгөх хэрэгтэй. Учир нь зурган бус asset байвал хэмжээний мэдээлэл дамжуулагдахгүй. Android-ын Xcode эвсэл Assets фолдерт шууд холбогдсон видеонд энэ хязгаарлалт хамаарахгүй.

Холимог аппын зураг

Хэрэв та зарим UI нь React Native дээр зарим нь платформ кодоор хийгдсэн холимог апп хийж байгаа бол аппд багтсан байгаа зургуудыг ашиглах бүрэн боломжтой.

Xcode asset catalogs-оор орсон зургууд эсвэл Android drawable фолдерт байгаа зургуудын хувьд өргөтгөлгүй нэрийг нь ашиглаарай:

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

Android assets доторх зургуудад asset:/-ыг ашиглана уу:

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

Эдгээр арга нь бүрэн баталгаатай гэх зүйлгүй. Аппликейшн дотор зургууд баталгаатай орох эсэх нь танаас шалтгаална. Мөн та зургийн харьцааг өөрөө тодорхойлж өгөх ёстой.

Network images

Апп дээр дэлгэц дээр гарч байгаа олон зураг хөрвүүлэх үед харагдахгүй байх, эсвэл хоёртын хэмжээг бага байлгахын тулд та заримыг нь динамикаар ачаалахыг хүсэж болох юм. Статик зургийг бодвол, та зургийнхаа хэмжээсийг өөрөө тодорхойлж өгөх хэрэгтэйгээрээ ялгаатай.App Transport Security -ын iOS дээрх шаардлагад нийцүүлэхийн тулд http ашиглахыг танд зөвлөх байна.

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

Network Requests for Images

Хэрэв та зургаас гадна HTTP-Verb, Толгой, Их бие зэргийг тохируулах гэж байгаа бол эх объект дээр эдгээр зүйлсийг тодорхойлж өгч хийж болно:

<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache',
    },
    body: 'Your Body goes here',
  }}
  style={{width: 400, height: 400}}
/>

Uri Data Images

Заримдаа та REST API-аас зургийн кодолсон мэдээлэл хүлээн аваад байж магадгүй. Эдгээр зургийг ашиглахын тулд 'data:' uri ашиглаж болно. Network resources-ын нэгэн адил та зургийн хэмжээсийг өөрөө тогтоож өгөх хэрэгтэй.

Өгөгдлийн сангаас жагсаалт доторх дүрс гэх мэт маш жижиг, динамик зурагт энэ аргыг ашиглахыг зөвлөе.

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

Cache Control (iOS)

Зарим тохиолдолд зөвхөн local кэш дотор байгаа зургийг дэлгэц дээр харуулах хэрэг гарч магадгүй. Жишээ нь өндөр нягтаршилтайг олох хүртэл бага нягтаршилтайн зайг хадгалах гэх мэт. Зарим үед та цаг хэмнэхийн тулд зураг хуучирсан эсэхийг үл тоон хуучин зураг харуулах үе байна. cache эх үүсвэрийн тусламжтай та сүлжээний layer нь кэштэй хэрхэн харилцах үйлчлэхийг удирдана.

  • default: Натив платформын үндсэн аргыг ашиглах.
  • reload: URL дахь өгөгдөл нь анхны эх үүсвэрээс ачаална. URL ачаалах хүсэлтийг биелүүлэхийн тулд бэлэн кэш өгөгдөл ашиглах учиргүй.
  • force-cache: Хүсэлтийг биелүүлэхийн тулд бэлэн кэш өгөгдөл нь ашиглалтын хугацаа, хэзээ дуусгавар болохоос үл хамааран ашиглагдана. Хэрэв тухайн хүсэлтэд таарах бэлэн өгөгдөл кэш дотор байхгүй бол анхны эх үүсвэрээс өгөгдлийг ачаална.
  • only-if-cached: Хүсэлтийг биелүүлэхийн тулд бэлэн кэш өгөгдөл нь ашиглалтын хугацаа, хэзээ дуусгавар болохоос үл хамааран ашиглагдана.Хэрэв URL ачаалах хүсэлтэд нийцэх бэлэн өгөгдөл кэш дотор байхгүй бол анхны эх үүсвэрээс өгөгдлийг ачаалах гэж оролдохгүй ба ачаалах процесс амжилтгүй боллоо гэж үзнэ.
<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    cache: 'only-if-cached',
  }}
  style={{width: 400, height: 400}}
/>

Local Filesystem Images

Images.xcassets-ын гаднах local resources-ын жишээг CameraRoll-оос харна уу.

Camera Roll-ын шилдэг зураг

iOS нь нэг зургийн олон хэмжээтэй хувилбарыг Camera Roll дотор хадгалдаг. Ажиллагааг бодолцон аль болох ойролцоо хэмжээний зургийг сонгох нь чухал. 200x200 харьцаатай thumbnail харуулах гэж байж 3264x2448 чанартай бүтэн зураг ашиглах шаардлагагүй. Яг таарсан зураг байвал React Native сонгон авна. Эс бөгөөс хэмжээг нь өөрчилсний улмаас бүрсийхээс сэргийлэн дор хаяж 50% том байх зургийг ойролцоо хэмжээтэй зургуудаас хайн эхний зургийг сонгодог. Анхнаасаа ингэж сонгох тохиргоотой байдаг тул та өөрөө нарийн, алдаагүй код бичих гэж санаагаа чилээх хэрэггүй.

Яагаад автоматаар бүгдийнх нь хэмжээг өөрчилж болохгүй гэж?

Хөтөч дотор та зургийн хэмжээг зааж өгөхгүй бол хөтөч нь 0x0 элемент бүхий зургийг авч татан, зөв хэмжээ дээр үндэслэн зургийг хуруулдаг. Үүний нэг асуудал нь зургууд ачаалж байх үед UI нь эмх замбараагүй болох ба хэрэглэгчийн өнцгөөс бол энэ нь тун таагүй явдал юм.

React Native дотор энэ төрлийн асуудал угийн байдаггүй. Зургийн хэмжээс эсвэл харьцааг урьдаар мэдэж байх нь хөгжүүлэгчийн ажил бөгөөд энэ нь хэрэглэгчийн талаас харвал илүү дээр гэж үздэг. Статик зургууд require('./my-icon.png') дагуу татагдах бөгөөд синтакс__хэмжээ нь автоматаар өгөгдөнө. Учир нь хэрэглэгч хандахад бэлэн болох үед хэмжээс нь бэлэн байна.

Жишээ нь, require('./my-icon.png')-ын үр дүн нь иймэрхүү:

{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

Объектоор авах

React Native дахь нэгэн сонирхолтой шийдвэр нь src атрибут нь source гэж нэрлэгдсэн явдал юм. String авахгүй ба uri атрибуттай объект хүлээн авдаг.

<Image source={{uri: 'something.jpg'}} />

Дэд бүтцийн талаас харвал тухайн объектод метадата хавсаргах боломж бидэнд олгож байгаа юм. Жишээ нь та require('./my-icon.png') ашиглаж байгаад байрлал, хэмжээний тухай бодит мэдээллийг нэмэх боломжтой (Их найдаад хэрэггүй. Цаашид өөрчлөгдөх магадлалтай!). Мөн ирээдүйд гарч болзошгүй элдэв эрсдлээс сэргийлэх юм. Жишээ нь бид sprite зураг дэмждэг болгохыг хүслээ гэж бодоход {uri: ...} гэж гаргахын оронд {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} гэж зааж өгөх бөгөөд бүх бэлэн сайтуудад илээр sprite дэмждэг болгох юм.

Хэрэглэгчийн талаас бол дэлгэц дээр харагдах хэмжээг тооцоолохын тулд зургийн хэмжээс гэхчлэн хэрэг болох шинж бүхий объектийг онцолж харахад тусалдаг. Зургийн талаар илүү дэлгэрэнгүй мэдээлэл хадгалах өгөгдлийн бүтэц хэлбэрээр ашиглах боломжтой.

Background Image via Nesting

Вэбийн нэгэн адил хөгжүүлэгчдээс түгээмэл ирдэг нэг хүсэлт нь background-image. Үүнийг шийдэхийн тулд та <ImageBackground> гэсэн компонент ашиглаж болох ба энэ нь <Image>-тай адилхан проптой. Дээрээс нь layer үүсгэхээр хүссэн дагавраа нэмэх боломжтой.

Зарим тохиолдолд ажиллуулахад энгийн болохоор та <ImageBackground>-ыг хэрэглэхийг хүсэхгүй ч байж болох юм. <ImageBackground>-ын мэдээлэл-тэй танилцаж, шаардлагатай үед өөрийн хүссэн компонентоо хэрхэн бүтээх тухай уншаарай.

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Та өргөн, өндөр гэсэн хэв маягийг нь тодорхойлж өгөх ёстой гэдгийг анхаарна уу.

iOS Хүрээний радиусын хэв маяг

Доорх булан, хүрээний хэв маягийг iOS зургийн компонентод дэмждэггүй болохыг анхаарна уу:

  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius

Off-Thread Image Decoding

Зургийг decode хийх нь хугацаа шаардсан ажил. Decoding нь гол thread дээр хийгддэг тул энэ нь вэб дээрх фрэйм унах гол шалтгаануудын нэг болдог. React Native-т зургийн decode нь өөр thread дээр хийгддэг. Бодит туршлага дээр бол зураг хараахан татагдаагүй үед асуудлыг шийдэх хэрэгтэй. Тэгвэл илүү хэдэн фрэймийн зайг гаргаж, decode хийхэд код өөрчлөх шаардлагагүй байна.

← Дэлгэц хооронд шилжихАнимейшн →