【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に表示しています。
通常なら、この取得したパスを使って、どこかに送ったり、参照されたファイルを加工する処理が加わることでしょう。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
