React Native Image.Source iOSのローカルTMPファイルパスを使用できません。 -- javascript フィールド と ios フィールド と reactjs フィールド と react-native フィールド 関連 問題

React native Unable to use local tmp file path for Image.source iOS












5
vote

問題

日本語

image.Source iosのローカルのTEMPファイルパスを使用できません。

<事前> <コード> <Image style={styles.containerRightCakeImageTag} source={{ isStatic: true, uri: "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" }} />
英語

Unable to use local temp file path for Image.source iOS.

    <Image        style={styles.containerRightCakeImageTag}       source={{          isStatic: true,         uri: "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg"        }}     /> 
</div
           
     
     

回答リスト

8
 
vote
vote
ベストアンサー
 

React-Native-FSを使用してディレクトリ(iOSとAndroidのために機能する)

を取得できます。 <事前> <コード> int2

画像要素は次のようになります。

<事前> <コード> int3
 

You can use react-native-fs to get directories (which works for ios and android)

var RNFS = require('react-native-fs'); 

Image element looks like:

<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/my.png'}} />  
</div
 
 
2
 
vote

ローカルファイルや画像を読み込んだとき( React-Native- Cached-Image )「ファイル://」をAndroidプラットフォーム用にのみ追加する必要があります。

これは私のアプリの1つのコードです:

<事前> <コード> let path = Platform.OS === "android" ? ('file://' + imageLocalUrl) : imageLocalUrl;

しかし、「React-Native-FS」を使用してファイルパスを読み取り、コード内のようにシミュレータパスを使用することはできません。

 

When you read local files or images (for example images cached with react-native-cached-image) you have to add the "file://" only for Android platform and not for the iOS platform.

Here is some code in one of my apps:

let path = Platform.OS === "android" ? ('file://' + imageLocalUrl) : imageLocalUrl; 

However, you'd better to use "react-native-fs" to read the file path and not use the simulator path as is in your code.

</div
 
 
1
 
vote

画像ファイルは、それを必要とする.jsファイルと同じフォルダに存在している必要があります。

<事前> <コード> <Image source={require('./Logo.png')} />

または

プロジェクトフォルダ内の画像ファイル。

<事前> <コード> import Logo from '..' // set image path <Image source={require(Logo)} />
 

The image file must exist in the same folder as the .js file requiring it.

<Image source={require('./Logo.png')} /> 

or

The image file in your project folder and requiring it.

import Logo from '..' // set image path   <Image source={require(Logo)} /> 
</div
 
 
     
     
-3
 
vote

ソースのISSTATICとURIを使用する必要がある

<事前> <コード> const localUri = "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" ; <Image source={{ isStatic: true, uri: localUri }} />
 

Use isStatic and uri in source match your need

const localUri = "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" ; <Image source={{ isStatic: true, uri: localUri }} /> 
</div
 
 

関連する質問

-1  キーパッドが開いているときにスクロールします  ( Scroll when the keypad is open ) 
私の画面で、入力フィールドを入力して検索結果を得てください。リストはScrollView内にレンダリングされていますが、キーパッドが開いているとき(少なくともAndroidでは、 どうすればいいですか? スクロールビューがレンダリングされているコンポーネントで...

2  反応ネイティブナビゲーションメニューボトムドックナビゲーションメニュー  ( React native navigation menu bottom docked navigation menu ) 
学習<コード> react-native は、画面下部にドッキングされたメニューを作成しようとしています。ナビゲーションメニューの上にドッキングされたScrollViewで画面の内容を表示できるようになっていますメッセンジャーメニュー?メッセージ画像がタップさ...

16  React-Navigationヘッダーにはかすかな行があります  ( React navigation header has a faint line ) 
これは大規模な冒険に変わり、その後非常に大きくて厄介な投稿に変わりました、それであなたが私がキーボードでおかしい混乱を読む必要があることからあなたをまとめることができます、ここに概要: メインゴール:私のアプリのナビゲーションバーを選択的に表示する方法は、私...

0  別のビューでオーバーラップボタン  ( Overlap button with another view ) 
入力フィールドにいくつかの値を入力し、それに応じて検索結果を取得する画面があります(<コード> <View style={styles.dropdown}> 内)。リストにActionButtonが重なるようになりたいです。他の入力フィールドに重なるように。 ...

3  React Nativeの各タブに異なる色を設定する方法  ( How to set different colors for each tab in react native ) 
私のアプリでは、TabViewAnimatedを使用してタブを作成しています。私は色が異なるために各タブが必要です。私は多くの点でそれを試してみましたが、うまくいきませんでした。これは私が今まで得た出力です。 私が欲しいのは以下のものです。 これは...

0  アレイを使用して<Picker.Item />を<Picker> </ Picker>に挿入する方法はありますか?  ( Is there a way to insert picker item into picker picker with the array ) 
> ピッカーに書いたコードは次のとおりですが、アレイを持つピッカーアイテムを上書きして実行することはできません。 どうやってこれを行うことができますか? <事前> <コード> import React, {useState} from 'react'; im...

7  React Native Error:モジュール `。/ index`を解決できません  ( React native error unable to resolve module index ) 
React Nativeを使用して新しく作成されたアプリケーションを持っています。アプリには、単純なログインフォームとフェッチクエリが含まれています。これ以外のものは何も複雑で、ほとんどほとんどありません。 Facebookを実装しようとしました。闘争の急...

0  ログインして新しい画面に移動すると、UIがフリーズします。この画面はアプリを更新したら機能します。なぜですか?  ( Ui freezes when i login and navigate to new screen the screen works once i refr ) 
React Nativeアプリを構築し、REDUXを使用してReactナビゲーションを実行しました。私が働いていない問題を解決します。また、両方の問題に取り組むことができるかもしれないそれらのうちの1つです。 マイスクリーンフローは次のようになるはずです。...

0  クラスベースのAXIOS要求をフックベースのコードに統合する  ( Integrating class based axios request to the hook based code ) 
このクラスベースのAXIOSリクエストをJSONファイルからデータを取得する他のフックベースのコードに統合する方法基本的に私はデータソースの場所をAXIOS GETリクエストと置き換えたいです。ありがとう。 <事前> <コード> componentDidMou...

0  React / JSのローカルフォルダからオープニングせずにファイルがコピーされた後、ファイルが入力された後に入力領域にファイル(主に画像ファイル)を貼り付ける方法?  ( How to paste files mainly image files in the input area after the file is copi ) 
私は(ユースエフェクト内で)コードを書き込んで、画像をアップロードすることができるようにすることができたら、どこでCtrl + Vを行うことができます。フォルダにイメージファイルx.jpgがあります。そのイメージを開いてコピーしたときにのみ、アプリケーションの...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有