🧢

ReactNative Image

2024/03/20に公開

React Native

TypeScript

tech

📕Overview

https://reactnative.dev/docs/image
ネットワークイメージ、静的リソース、一時的なローカルイメージ、カメラロールなどのローカルディスクのイメージなど、さまざまな種類のイメージを表示するための React コンポーネント。

この例では、ローカルストレージ、ネットワーク、さらには 'data:' uri スキームで提供されるデータから画像を取得して表示する方法を示します。

🧷summary

まずは、assetsディレクトリに画像を配置しましょう。私は猫ちゃんの画像を配置しました。

App.tsxを修正:

import { Image, StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require('./assets/shot.jpg')} />
    </View>
  );
}

コードの説明をすると、Imageというコンポーネントを使って、ローカルの画像を表示しています。このままだとレイアウトが崩れているので、画面真ん中に配置できるように、StyleSheetを使ってみました。

import { Image, StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require('./assets/shot.jpg')} />
    </View>
  );
}

このように猫ちゃんの画像が表示できればOKです!

APIの画像を表示する場合は、axiosを使います。fetchメソッドだけでもできると思いますが...
axiosを追加する:

bun install axios

useEffectを使用して、APIから顔の画像を取得して表示してみましょう。

import React, { useEffect, useState } from "react";
import { View, Text, Image, FlatList, ActivityIndicator } from "react-native";
import axios from "axios";

interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

export default function App() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      try {
        const response = await axios.get("https://reqres.in/api/users");
        setUsers(response.data.data);
      } catch (e) {
        console.error(e);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <View>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              marginTop:10,
              marginBottom: 10,
              marginLeft:10,
            }}
          >
            <Image
              source={{ uri: item.avatar }}
              style={{ width: 50, height: 50, borderRadius: 25 }}
            />
            <View style={{ marginLeft: 10 }}>
              <Text>{`${item.first_name} ${item.last_name}`}</Text>
              <Text>{item.email}</Text>
            </View>
          </View>
        )}
      />
    </View>
  );
}

実行結果:

🧑‍🎓thoughts

公式のImageコンポーネントのコードを参考にしようとしましたが、読みづらくコードを修正して、コードがわかりやすくて、見た目が綺麗な方のUIを作ってみました。ReactNativeは独特のルールがあって、Reactは異なるところがあって混乱すると場面がありますね。

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion