React Native-이미지

이 장에서는 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

산출