React-native-images

React Native-画像

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

画像を追加する

*src* フォルダー内に新しいフォルダー *img* を作成しましょう。 このフォルダー内に画像（ *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/finddevguides/Desktop/NativeReactSample/logo.png')}/>
)
export default ImagesExample

出力

React Native Images

スクリーン密度

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

出力

ネットワーク画像