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 địnhwidthheight 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

Đầu ra