CommentOut

【React Native】ExpoのDocumentPickerの使い方 【React Native】ExpoのDocumentPickerの使い方

【React Native】ExpoのDocumentPickerの使い方

公開日:  最終更新日:

ExpoのDocumentPickerの公式情報少なすぎない?

Expoの公式ドキュメント DocumentPicker
https://docs.expo.dev/versions/latest/sdk/document-picker/

インストールコマンドとapp.jsonの設定しか載ってないじゃないか。
ちょっと使い方をまとめた物を載せておきます。

まず、ExpoでReactNativeのプロジェクトを作ります

今回は「doc_pick」という名前でプロジェクトを作ります。

$ expo init doc_pick

上記コマンドでプロジェクトを作ります。
テンプレートは「blank」で作ります。

DocumentPickerを使うには、まずインストールしてください

公式ドキュメントに従って、expo-document-pickerをインストールします。

$ npx expo install expo-document-picker

インストールが終わったら、ちゃんと入っているかpackage.jsonを確認しておきます。

expo-document-pickerをimportする

import * as DocumentPicker from 'expo-document-picker';

他のコンポーネントのように{}を使っていないですが、これで読み込みできています。

それで、ここから先の説明が公式ドキュメントにないんですよ。
この記事では、ここから先に踏み込んでいきます。

ドキュメント参照用のボタンコンポーネントを設置して、onPressイベントを設定しましょう

<Button
    title="参照"
    onPress={async () => {
        const { type, uri, name, size } = await DocumentPicker.getDocumentAsync({});
        if (type === 'success') {
            setDocumentInfo({
                DocURI: uri,
                DocName: name,
                DataSize: size
            });
        }
    }} />

ButtonコンポーネントにonPress={ }でボタンが押された時の挙動を設定しています。

await DocumentPicker.getDocumentAsync({});で端末内参照画面が起動して、ファイルを選択する画面に切り替わります。

そして、無事にファイルの情報が取得できたかどうかがtypeに帰ってきます。
無事にファイルが参照出来た場合にはtype = ‘success’となるため、成功した場合には取得したファイルの情報をuseStateに保存する

という処理になっています。

コード全体を記述するとこういう感じです。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { useState } from 'react';
import * as DocumentPicker from 'expo-document-picker';

export default function App() {
	const [documentInfo, setDocumentInfo] = useState({
		DocURI: '',
		DocName: '',
		DataSize: 0
	});

	return (
		<View style={styles.container}>
			<Text>Open up App.js to start working on your app!</Text>
			<Text>FileURI : { documentInfo.DocURI }</Text>
			<Text>FileName : { documentInfo.DocName }</Text>
			<Text>DataSize : { documentInfo.DataSize }</Text>
			<Button
				title="参照"
				onPress={async () => {
					const { type, uri, name, size } = await DocumentPicker.getDocumentAsync({});
					if (type === 'success') {
						setDocumentInfo({
							DocURI: uri,
							DocName: name,
							DataSize: size
						});
					}
				}} />
			<StatusBar style="auto" />
		</View>
	);
}

const styles = StyleSheet.create({
});

DocumentPickerで取得したファイル情報は一度useStateに入れて、useStateの内容はTextに表示しています。
通常なら、この取得したパスを使って、どこかに送ったり、参照されたファイルを加工する処理が加わることでしょう。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。