React Native - Hình ảnh
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
Hãy để chúng tôi tạo một thư mục mới img bên trong srcthư mục. Chúng tôi sẽ thêm hình ảnh của chúng tôi (myImage.png) bên trong thư mục này.
Chúng tôi 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
Đầu ra
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 @2x, @3xhậu tố. Ứ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 img thư mục.
[email protected]
[email protected]
Hình ảnh mạng
Khi sử dụng hình ảnh mạng, thay vì require, chúng tôi cần sourcebất động sản. Nên xác địnhwidth và height 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