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.

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

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.