peri hokiperihokiclarustologisticsrimashaop.compola taktis menang gates of olympus x1000 perihokipemain perihoki bongkar trik jepep starlight princess x1000perihoki beri panduan lengkap bermain mahjong ways 2 pgsofttips cara penghasil uang pgsoft mahjong ways 2 perihokimahjong wins 3 perihoki memberikan penggali terbesarfenomena gates of olympus buka peluang besar bagi duta76cara dapat pola emas rahasia di duta7 wild west goldtrik menang pgsoft mahjong ways 2 modal receh maxwin duta76duta76 main pgsoft mahjong ways 2 di sela istirahatscatter hitam mahjong wins 3 spin pasti jepe duta76perihoki spin mahjong ways 2 pgsoft scatter hitam maxwinsimbol mahjong wins 3 yang sering muncul di awal perihokitrik gampang menang mahjong winscuan mahjong wins 3 tanpa hentipola spin taruhan kecil mahjong winsstrategi kunci scatter hitam beruntungacor total mahjong wayskemenangan maksimal mahjong wayskemenangan pria pekanbaru mahjong waysmahjong wins3 fenomena baru sumatera baratmenangkan mahjong dengan lincahmenembus batas keberuntungan mahjong waysmenjajal keberuntungan di mahjong wayspola gratis mahjong ways1scatter hitam senjata rahasia mahjong winsteknik spinning menguntungkan untuk scatter hitamanalisis rtp tertinggi mahjong winsfenomena scatter hitam mahjong winsibu rumah tangga dan keberuntungan mahjongkeseruan main mahjong wins3menang mahjong pengguna baru di sosial mediamenghargai setiap momen di mahjong waysserunya main mahjong di warung internetspin slow motion mancing scatterstrategi jitu maxwin mahjong waysstrategi jitu menang mahjong modal kecil jackpot besaranak kampung papua menggemparkan mahjongkeajaiban scatter hitam mahjong wayskeberhasilan joni mahjong winskejaiban mahjong ways di ujung jalanketua mahjong wins3 kehadiran kemenangan dimulai dari balimahjong kehadiran yang menguntungkanmahjong menggila adat88panduan kilat raih 108 jutatips memenangkan mahjongbarista kopi menang 110 juta spin mahjongdakota76 scatter hitam mahjong wins 3gagal cpns menang mahjong wins 3 rp120 jutakisah karyawan minimarket dapat thr lebih awal mahjong winskisah pelajar sma kuasai mahjong wins 3 inspirasi sekolahkisah penjaga parkir tanah abang motor baru mahjong winskisah sukses ibu rumah tangga bandung mahjong winsmahasiswa kkn beli iphone15 mahjong wins3 dakotamantan anak band influencer mahjong scatter hitampola rtp senin gates of olympus guru matematikatukang cuci motor menemukan keberuntungan di mahjong

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 314

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 315

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 316

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 317

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: drivers/Session_files_driver.php

Line Number: 108

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Cannot change save handler when headers already sent

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_start(): Cannot start session when headers already sent

Filename: Session/Session.php

Line Number: 143

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

Image trong React Native - Freetuts
REACT NATIVE CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Image trong React Native

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Image trong React Native, đây là một trong những core component được sử dụng cho việc hiển thị ảnh.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Image hỗ trợ việc hiển thị ảnh bằng rất nhiều cách khác nhau bao gồm hiển thị bằng URL, local images, ảnh từ bộ nhớ hay từ thư viện ảnh. Bài viết này sẽ đưa ra các ví dụ về cách để hiển thị hình ảnh trong React Native bằng nhiều cách khác nhau, ngoài ra còn chỉ ra những props được hỗ trợ ở core component này.

1. Image trong React Native

Để sử dụng Image, trước tiên chúng ta sẽ cần phải import từ react-native.

import {Image} from 'react-native'

Như đã đề cập ở trên thì React native cho phép chúng ta hiển thị ảnh bằng rất nhiều cách khác nhau, và trong phần này chúng ta sẽ đi tìm hiểu nó.

Bài viết này được đăng tại [free tuts .net]

Static Image Resource

Để thêm một hình ảnh tĩnh (Static image) hay bất cứ các file media nào khác trong ứng dụng chúng ta cần require image và truyền nó vào trong props source của Image, và đây chúng ta có một ví dụ:

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

hãy chú ý patch trong require(), ở đây chúng ta có file my-icon.png ở cùng thư mục.

Giả sử cấu trúc thư mục như sau:

- App.js
- avatar@2x.png
- avatar@3x.png

thì trong file App.js khi muốn gọi hình ảnh thì chúng ta sẽ chỉ định patch như sau:

<Image source={require('./avatar@2x.png')} />

Hãy đặt tên hình ảnh tùy vào mục đích riêng và tùy thuộc vào tỉ lệ màn hình của thiết bị để dễ quản lí hơn sau này. Ví dụ avatar@2x.png sẽ được sử dụng trên iPhone7, trong khi đó avatar@3x.png sẽ được sử dụng trên các thiết bị iPhone 7Plus chẳng hạn.

Network Images

Trong trường hợp chúng ta muốn hiển thị ảnh không có sẵn trong ứng dụng mà muốn lấy từ URL, lúc này chỉ cần truyền vào props source một object có thuộc tính uri là URL hình ảnh.

<Image source={{uri: 'https://freetuts.net/public/logo/logo.png'}} style={{width: 318, height: 40}} />

Không giống như static image thì network image bắt buộc cần phải chỉ định props width và height bằng cách thủ công. React Native khuyên chúng ta nên sử dụng đường dẫn bảo mật https cho hình ảnh đẻ đáp ứng yêu cầu về App Transport Security của IOS.

Ngoài ra thuộc tính url còn có thể truyền vào một ảnh ở định dạnh base64.

<Image
        source={{
          uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
/>

Network Requests

Trong trường hợp chúng ta muốn thiết lập thêm các HTTP-Verb, Headers, Body,...hay các cơ chế về cấu hình ảnh khác nhau thì chúng ta có thể định nghĩa thêm vào objects được truyền vào props source các thuộc tính sau.

<Image source={{
            uri: 'https://freetuts.net/view_image.php',
            method: 'POST',
            headers: {
                Authorization: 'Bearer ...'
            },
            body: {
                shape: 'circle',
                width: 400,
                height: 400
            }
            }}
            style={{width: 400, height: 400}} 
/>

Image là một core component trong React Native ngoài style thì nó còn có nhiều props hỗ trợ khác nhau, chúng ta có thể tham khảo thêm các props hỗ trợ ở document của React Native.

2. Một số thủ thuật với Image

Trong quá trình làm việc với React Native thì chúng ta có thể sử dụng một vài tricks bên dưới với Image.

Image Responsive

Một ứng dụng React Native có thể được sử dụng ở nhiều nền tảng khác nhau, đồng nghĩa với nó là sẽ có nhiều tỉ lệ màn hình khác nhau. Với mỗi tỉ lệ màn hình thì hình ảnh cũng sẽ được hiển thị khác nhau. Khi muốn responsive các hình ảnh trong ứng dụng thì chúng ta có thể truyền vào Image vào props resizeMode có giá trị là contain và kích thước ảnh sẽ gán giá trị là undefined như ví dụ bên dưới.

<Image style={{flex:1, height: undefined, width: undefined}} source={require('../../../assets/logo.png')} resizeMode="contain" />

Lúc này hình ảnh sẽ được căn chỉnh theo tỉ lệ màn hình của từng thiết bị, nhưng trong một vài trường hợp chúng ta nên xây dựng riêng các tỉ lệ hình ảnh cho tùy loại màn hình. Đây là một cách không quá là tối ưu và hoàn hảo nhưng cũng hữu ích trong hầu hết các trường hợp.

Background Image

React Native có xây dựng sẵn môt component cho phép chỉ định hình ảnh làm background đó là ImageBackground, khi sử dụng ImageBackground chúng ta cần import và truyền vào giá trị của props source như trong Image.

...
<ImageBackground source= { uri: "https://freetuts.net/background-image.jpg"} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
</ImageBackground>

...
const styles = StyleSheet.create({
...
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
...
});

Sử dụng thuộc tính resizeMode cho style để chỉ định kiểu của background.

Trên đây là những nội dung chính về Image trong React Native, đây là một core components khá quan trọng giúp chúng ta có thể làm việc với ảnh trong React Native, rất mong bài viết sẽ hữu ích cho bạn cho quá trình học tập với React Native.

Cùng chuyên mục:

FlatList trong React Native

FlatList trong React Native

Layout trong Reat Native với FlexBox

Layout trong Reat Native với FlexBox

Trong một ứng dụng thì giao diện là thứ quan trọng và mất khá nhiều…

Thuộc tính Style trong React Native

Thuộc tính Style trong React Native

Các thành phần trong React Native cơ bản nhất

Các thành phần trong React Native cơ bản nhất

Để làm quen với React Native thì chúng ta sẽ phải hiểu một vài khái…

Cài đặt Expo - Môi trường xây dựng ứng dụng React Native

Cài đặt Expo - Môi trường xây dựng ứng dụng React Native

React Native là gì? Có nên học React Native không?

React Native là gì? Có nên học React Native không?

Top