ReactNative-画像

この章では、ReactNativeで画像を操作する方法を理解します。

画像の追加

新しいフォルダを作成しましょう imgsrcフォルダ。画像を追加します(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

出力