ตอบสนองเนทีฟ - รูปภาพ

ในบทนี้เราจะเข้าใจวิธีการทำงานกับภาพใน React Native

การเพิ่มรูปภาพ

ให้เราสร้างโฟลเดอร์ใหม่ img ข้างใน srcโฟลเดอร์ เราจะเพิ่มภาพของเรา (myImage.png) ภายในโฟลเดอร์นี้

เราจะแสดงภาพบนหน้าจอหลัก

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

อิมเมจในเครื่องสามารถเข้าถึงได้โดยใช้ไวยากรณ์ต่อไปนี้

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

เอาต์พุต

ความหนาแน่นของหน้าจอ

React Native เสนอวิธีปรับแต่งภาพสำหรับอุปกรณ์ต่างๆโดยใช้ @2x, @3xคำต่อท้าย แอปจะโหลดเฉพาะภาพที่จำเป็นสำหรับความหนาแน่นของหน้าจอโดยเฉพาะ

ต่อไปนี้จะเป็นชื่อของรูปภาพภายในไฟล์ img โฟลเดอร์

[email protected]
[email protected]

รูปภาพเครือข่าย

เมื่อใช้อิมเมจเครือข่ายแทน requireเราต้องการไฟล์ sourceทรัพย์สิน. ขอแนะนำให้กำหนดไฟล์width และ height สำหรับภาพเครือข่าย

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

เอาต์พุต