リモートネイティブ画像をカメラロールに保存しますか？

Question

ReactNative CameraRollのsaveImageWithTag機能から何かエラーが発生しています。以下のようなものを使用してローカルの画像を保存する：このケースで

Error: The file “myimage.png” couldn’t be opened because there is no such file.(…) 

./path/to/myimage.png私はImageソースのrequire画像を使用したいのパスです：

CameraRoll.saveImageWithTag('./path/to/myimage.png'); 
     .then(res => console.log(res)) 
     .catch(err => console.log(err)); 

することは私にエラーを与えます。ローカルイメージのフルパスはどのようにすべきですか？私はそれらをアクセス可能にするためにそれらを別々に保管する必要がありますか？

Answer 1

0短い答え

ローカルの画像を検索するためにRNFSを使用してください。 「ネイティブリアクトでカメラロールへのリモート画像保存」あなたのタイトルのために

1.

キーワードがremoteです。

CameraRollを使用する前に、link the libraryを先に入力する必要があります。

その後、私は1つImageと1 Buttonを作成します。

render: function() { 
    return (
     <View style={styles.container}> 
      <Image ref="logoImage" 
      style={{ height:50, width: 50 }} 
      source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} 
      /> 
      <TouchableHighlight style={styles.button} onPress={this._handlePressImage} underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Save Image</Text> 
      </TouchableHighlight> 
     </View> 
    ); 
    }, 

私はボタンを押すと、プログラムはカメラロールに画像を保存します：

_handlePressImage: function() { 
    console.log('_handlePressImage.'); 

    var uri = this.refs.logoImage.props.source; 
    console.log(uri); 
    CameraRoll.saveImageWithTag(uri, function(result) { 
     console.log(result); 
    }, function(error) { 
     console.log(error); 
    }); 
    }, 

React Native APIが推奨されていないことを警告していますが、代わりにpromiseを使用してください：

var promise = CameraRoll.saveImageWithTag(uri); 
promise.then(function(result) { 
    console.log('save succeeded ' + result); 
}).catch(function(error) { 
    console.log('save failed ' + error); 
}); 

ここでは、カメラのロールにロゴ画像が表示されます。あなたのタイトルにもかかわらず、あなたのコンテンツ

であなたの本当の問題については

2.あなたのコードがlocalパスを使用して、remote言います。

パスを'./path/to/myimage.png'と指定すると、イメージパスは.jsファイルからの相対パスであると仮定します。つまり、イメージは最終的に実行されているアプリケーションとは関係なく、イメージファイルを見つけることができません。

<Image ref="logoImage" 
    style={{ height:50, width: 50 }} 
    source={require('./logo_og.png')} 
/> 

と、このように画像を保存します：

今ローカルファイルを使用するようにImageを変更

になり

var promise = CameraRoll.saveImageWithTag('./logo_og.png'); 

：CameraRoll APIがあるので

に対応する、これは最終的な実行中のアプリケーションに属し、javascriptには属しません。

npm install react-native-fs --save 

して、ライブラリをリンク：

3. RNFSは、まず以下のコマンドを実行するローカル画像

を保存します。

Library/Caches下の画像を入れてから：

var cacheImagePath = RNFS.CachesDirectoryPath+"/logo_og.png"; 
console.log(cacheImagePath); 
var promise = CameraRoll.saveImageWithTag(cacheImagePath); 
promise.then(function(result) { 
    console.log('save succeeded ' + result); 
}).catch(function(error) { 
    console.log('save failed ' + error); 
}); 

ありがとう：

我々は地元の画像を保存することができます。