質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Android Emulator

Android EmulatorはアンドロイドのOSで起動しているアンドロイドのデバイスの機能をシミュレートするソフトウェアです。Emulatorは開発者に複数の違う設定を持ったデバイスを必要とすることなくアプリケーションを開発しテストすることが可能になります。

Q&A

0回答

420閲覧

NativeScript(SvelteNative)でデバイスの画像を取得できない

uchida_yuma

総合スコア44

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Android Emulator

Android EmulatorはアンドロイドのOSで起動しているアンドロイドのデバイスの機能をシミュレートするソフトウェアです。Emulatorは開発者に複数の違う設定を持ったデバイスを必要とすることなくアプリケーションを開発しテストすることが可能になります。

0グッド

0クリップ

投稿2022/03/18 03:50

前提

NativeScript(SvelteNative)で日記アプリを開発しております。
*SvelteNativeやnativescriptのタグがなくReactNativeになってしまっており、申し訳ありません。

npmモジュールのnativescript-imagepickerを使ってデバイスの画像を選択するところまではいけるのですが、実際に実ファイルを取得するところで、空の情報が返ってきたり、エラーが返ってきたりで上手く動作しません。

実現したいこと

Androidのイメージギャラリーから写真をアップロード

  1. 番号リスト具体的には、Androidエミュレーターのストレージの写真を取得( /storage/emulated/0/Pictures/IMG_×××××.jpg)
  2. base64文字列にエンコード

なのですが、画像ファイル自体を取れておりません。

発生している問題・エラーメッセージ

catch節に引っかかっていますが、具体的な問題は出てこず困っております。

{ "err": {} }

該当のソースコード

JavaScript

1const selectImage = async() => { 2 const context = imagepicker.create({ mode: 'single', mediaType: 'Image' }); 3 context.authorize() 4 .then(() => context.present()) 5 .then( async(selection) => { 6 diary.image = selection[0]; 7 console.log(selection[0]); 8 // ↓ "err": {} 9 // var loadedImage = await ImageSource.fromNativeSource(diary.image._android); 10 // ↓ "err": {} 11 // var loadedImage = await ImageSource.fromAsset(diary.image._android); 12 // ↓ "err": {} 13 // base64 = selection[0]._android.toBase64String("jpg", 20); 14 // console.log(base64); 15 // console.log(diary.image._android); 16 // var loadedImage = await ImageSource.loadFromFile(diary.image._android); 17 console.log(loadedImage); 18 }) 19 .catch(err => console.error({err})); 20 } 21 22<scrollView class="color-base" scrollBarIndicatorVisible="false"> 23 <stackLayout class="color-base mx-10" height="2500"> 24 <label text='What happened today' class="heading" marginTop="20"/> 25 <label text='How are you feeling today?' class='f14 text-glay-700'/> 26 <flexboxLayout class='card box-shadow mb-50' flexWrap="wrap"> 27 {#each feels as f} 28 <button text="{f.emoji + ' ' + f.name}" 29 class='feels_item text-glay-600' width="29%" 30 color="{f.id === diary.feel_id ? '#1558d6' : ''}" 31 horizontalAlignment="center" 32 on:tap="{feelSelect(f.id)}" 33 /> 34 {/each} 35 </flexboxLayout> 36 <label text='Today note' class="f14 text-glay-700" /> 37 <textField bind:text={body} hint="Tap diary template ↓" class="diary-field bg-white mb-30" style="placeholder-color:#999"/> 38 {#if templates.length > 0} 39 <stackLayout height="{templates.length * 30}" class='mb-50'> 40 {#each templates as t} 41 <label text={t.body} class="p-10 px-20 bg-white text-glay-500 mb-30" horizontalAlignment="right" 42 on:tap={setTemplates(t.body)} 43 /> 44 {/each} 45 </stackLayout> 46 {/if} 47 <label text='Today photo (optional)' class="f14 text-glay-700"/> 48 <flexboxLayout class="card" flexDirection="column" justifyContent="center" alignItems="center" on:tap={selectImage}> 49 <image src="{!diary.image ? '~/storage/create/photo.png' : diary.image}" width="20%" class="mb-5"/> 50 <label text='select photo' class="text-glay-400"/> 51 </flexboxLayout> 52 <button text="Save" class="btn-save mb-50" on:tap={postDiary}/> 53 </stackLayout> 54<!-- </stackLayout> --> 55</scrollView>

AndroidManifest.xml

xml

1<?xml version="1.0" encoding="utf-8"?> 2<manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="__PACKAGE__" 4 android:versionCode="18" 5 android:versionName="0.18"> 6 7 <supports-screens 8 android:smallScreens="true" 9 android:normalScreens="true" 10 android:largeScreens="true" 11 android:xlargeScreens="true"/> 12 13 <uses-permission android:name="android.permission.CAMERA"/> 14 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 15 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 16 <uses-permission android:name="android.permission.INTERNET"/> 17 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 18 19 <application 20 android:name="com.tns.NativeScriptApplication" 21 android:allowBackup="true" 22 android:usesCleartextTraffic="true" 23 android:icon="@drawable/icon" 24 android:label="@string/app_name" 25 android:theme="@style/AppTheme"> 26 27 <activity 28 android:name="com.tns.NativeScriptActivity" 29 android:label="TapDiary" 30 android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode" 31 android:theme="@style/LaunchScreenTheme"> 32 33 <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" /> 34 35 <intent-filter> 36 <action android:name="android.intent.action.MAIN" /> 37 <category android:name="android.intent.category.LAUNCHER" /> 38 </intent-filter> 39 <intent-filter android:autoVerify="true"> 40 <action android:name="android.intent.action.VIEW" /> 41 <category android:name="android.intent.category.DEFAULT"/> 42 <category android:name="android.intent.category.BROWSABLE" /> 43 <data android:scheme="https" android:host="app.tapdiary.life" /> 44 </intent-filter> 45 <intent-filter android:autoVerify="true"> 46 <action android:name="android.intent.action.VIEW" /> 47 <category android:name="android.intent.category.DEFAULT"/> 48 <category android:name="android.intent.category.BROWSABLE" /> 49 <data android:scheme="app.tapdiary.life" /> 50 </intent-filter> 51 </activity> 52 <activity android:name="com.tns.ErrorReportActivity"/> 53 </application> 54</manifest> 55

package.json

json

1{ 2 "name": "tns-template-blank-svelte", 3 "displayName": "TapDiary", 4 "templateType": "App template", 5 "author": "David Pershouse (https://github.com/halfnelson)", 6 "version": "7.0.0", 7 "main": "app.js", 8 "description": "Tap only write your diary", 9 "license": "Apache-2.0", 10 "repository": "https://github.com/halfnelson/svelte-native-template", 11 "dependencies": { 12 "@nativescript/core": "~7.0.0", 13 "@nativescript/theme": "~2.5.0", 14 "@nativescript/webpack": "3.0.0", 15 "@triniwiz/nativescript-supabase": "^0.1.0", 16 "@triniwiz/nativescript-supabase-realtime": "^0.1.2", 17 "@triniwiz/nativescript-supabase-storage": "^0.1.1", 18 "base64-arraybuffer": "^1.0.2", 19 "dayjs": "^1.10.7", 20 "dotenv": "^10.0.0", 21 "nativescript-imagepicker": "^7.1.0", 22 "nativescript-urlhandler": "^1.3.0", 23 "net": "^1.0.2", 24 "object-dig": "^0.1.3", 25 "svelte-native": "~0.9.1", 26 "svelte-routing": "^1.6.0" 27 }, 28 "devDependencies": { 29 "@nativescript/android": "7.0.0", 30 "@nativescript/ios": "8.1.0", 31 "eslint-plugin-svelte3": "^3.2.1", 32 "svelte": "~3.24.1", 33 "svelte-loader-hot": "~0.3.1", 34 "svelte-native-preprocessor": "^0.2.0", 35 "svelte-preprocess": "^4.0.8", 36 "typescript": "~4.0.2" 37 }, 38 "scripts": { 39 "nsios": "tns run ios --device 'iPhone 13 mini'" 40 } 41} 42

実際の動き

実際の動き

試したこと

  • loadFromFile
  • fromAsset
  • loadFromResource

などなど、nativescript公式ドキュメントに記載されていたメソッドを色々試して見ましたが、同じエラーでした。

VueNativeやAngularNativeなども基本的には同じのはずですがので、似た事例をご存知の方がいらっしゃいましたら、何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uchida_yuma

2022/03/18 10:15

すごく似たプラグインがあるのですね! ちょっとJDKの問題で実行できていないので、明日解決したら結果ご連絡いたします。 ありがとうございます😌
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問