Trong chương này, chúng ta sẽ hiểu cách làm việc với hình ảnh trong React Native.
Thêm hình ảnh
Tạo một thư mục mới img bên trong thư mục src . Chúng ta sẽ thêm hình ảnh của mình ( myImage.png ) vào trong thư mục này.
Chúng ta sẽ hiển thị hình ảnh trên màn hình chính.
App.js
import React from 'react'; import ImagesExample from './ImagesExample.js' const App = () => { return ( <ImagesExample /> ) } export default App
Hình ảnh cục bộ có thể được truy cập bằng cú pháp sau.
image_example.js
import React, { Component } from 'react' import { Image } from 'react-native' const ImagesExample = () => ( <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} /> ) export default ImagesExample
Kết quả
Mật độ màn hình
React Native cung cấp một cách để tối ưu hóa hình ảnh cho các thiết bị khác nhau bằng cách sử dụng hậu tố @2x, @3x . Ứng dụng sẽ chỉ tải hình ảnh cần thiết cho mật độ màn hình cụ thể.
Sau đây sẽ là tên của hình ảnh bên trong thư mục img .
my-image@2x.jpg my-image@3x.jpg
Hình ảnh mạng
Khi sử dụng hình ảnh mạng, thay vì yêu cầu , chúng tôi cần thuộc tính nguồn . Bạn nên xác định chiều rộng và chiều cao cho hình ảnh mạng.
App.js
import React from 'react'; import ImagesExample from './image_example.js' const App = () => { return ( <ImagesExample /> ) } export default App
image_example.js
import React, { Component } from 'react' import { View, Image } from 'react-native' const ImagesExample = () => ( <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}} style = {{ width: 200, height: 200 }} /> ) export default ImagesExample