[React Native] Imageコンポーネントの使い方

概要

React Nativeで画像を表示するにはImageコンポーネントを使用する。
sourceプロパティは指定する値がURLかファイルパスかで記述方法が異なる。

URLの場合

オブジェクトのuriキーにURL文字列を渡す。
<Image style={{ width: 100, height: 100 }} source={{ uri: "https://picsum.photos/id/12/2500/1667" }} />

ファイルパスの場合

require関数を使う。
<Image style={{ width: 100, height: 100 }} source={require("./assets/img1.jpg")} />

resizeMode

styleのresizeModeで縦横比を維持したリサイズを行うことができる。
<Image style={{ height: 400, resizeMode: "contain" }} source={{require("./assets/img1.jpg")} />

• “contain”
  heightとwidthの小さい方に合わせてリサイズされる。
• “cover”
  heightとwidthの大きい方に合わせてリサイズされる。

サンプル

import { View, Image } from "react-native";

export default function App() {
  return (
    <View>
      <Image style={{ width: 100, height: 100 }} source={{ uri: "https://picsum.photos/id/12/2500/1667" }} />
      <Image style={{ height: 400, resizeMode: "contain" }} source={require("./assets/img1.jpg")} />
    </View>
  );
}