ReactNative Expoでアプリ開発入門してみる Part2

Part1 の続きです。

画像ピッカーを実装する

画像ピッカーをインストールします

expo installでインストールします。

$ npx expo install expo-image-picker

全デバイスに対応しています。強い。

画像選択を実装します。

App.jsへ、ImagePickerを起動する関数を追加します。

App.js

//　略
import * as ImagePicker from 'expo-image-picker';

export default function App() {
  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      console.log(result);
    } else {
      alert('You did not select any image.');
    }
  };
//　略

ButtonComponentに押した時の処理を渡せるようにします。

onPress Propsを追加します。

Button.js

export default function Button({ label,  theme, onPress}) {
// 略
        <Pressable
          onPress={onPress}
        >

App.jsでButtonにonPressPropsに先程追加したpickImageAsync関数を渡すようにします。

      <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />

選択した画像を表示するようにします

追加した部分を抜粋しています。

App.js

import { useState } from 'react';


export default function App() {
  const [selectedImage, setSelectedImage] = useState(null);

  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
    } else {
      alert('You did not select any image.');
    }
  };
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <ImageViewer
          placeholderImageSource={PlaceholderImage}
          selectedImage={selectedImage}
        />

ImageViewerを、画像が選択されていた場合にその画像を表示するように修正します。

export default function ImageViewer({ placeholderImageSource, selectedImage }) {
  const imageSource = selectedImage  ? { uri: selectedImage } : placeholderImageSource;

  return <Image source={imageSource} style={styles.image} />;
}

Choose a　photoボタンを押すことで、画像選択できるようになりました。
画像を選択すると、自分の選択した画像が画面に表示されるようになりました。