web-dev-qa-db-ja.com

反応ネイティブAndroidアプリでGIFを表示する方法？

Android react-native appのImageタグのURLを介して簡単なgifを表示したいのですが、起動時に画像が表示されません。 docs はiOSでのみ機能し、Androidでは機能しません。

<Image
  style={styles.gif}
  source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>

ここにも同様の質問がありましたが、すでに述べたように、これはiOSでのみ動作します： アニメーションGIFをReact Native？
このコミットに関しては動作するはずです： https://github.com/facebook/react-native/commit/fcd7de5301655b39832d49908e5ca72ddaf91f7e

androidimagereact-nativegif
21
Orlando

GIFサポートなどをオプションにすることで、コアライブラリを小さくしました。

そのため Androidでgifサポートを手動でオプトインする必要があります 。次の両方の行をAndroid/app/build.gradleファイルの依存関係の下に追加します。

compile "com.facebook.fresco:animated-gif:1.3.0"
compile "com.facebook.fresco:animated-base-support:1.3.0"

したがって、依存関係セクションは次のようになります。

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.Android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile "com.facebook.fresco:animated-gif:1.3.0"
  compile "com.facebook.fresco:animated-base-support:1.3.0"

これによりデバッグビルドの問題は解決しますが、リリースビルドでも問題を解決したい場合は、proguard-rulesファイルに次の行を追加する必要があります。

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

これに関する詳細はこちら： https://github.com/facebook/fresco/issues/1177

これは commit で修正され、次のリリースに含まれる予定です。

41
Orlando

最新のReact Native（v0.48）では上記のすべてが機能しませんでした。次の依存関係をAndroid/app/build.gradleに追加する必要がありました。

compile 'com.facebook.fresco:fresco:1.5.0' compile 'com.facebook.fresco:animated-gif:1.5.0'

15
Tekeste Kidanu

これらの依存関係を追加できます。私はこれをバージョン（v0.44.0）で使用しています：

compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'

バージョンv0.50では、追加するだけです

compile 'com.facebook.fresco:animated-gif:1.3.0'

13
Himanshu Teotia

"react-native": "^0.57.1"にアップグレードし、アニメーションgifの再生を停止しました。アニメーションの最初のフレームを静的な画像としてレンダリングしただけです。

これを修正するために、次のライブラリを含めました。

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile "com.facebook.fresco:animated-base-support:1.3.0"

// (Only if supporting WebP.)
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'
6
Mapsy

rNバージョン.60を使用している場合は、アプリのbuild.gradleファイル内に以下を追加してください

dependencies {
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
}

ソース

1
zashishz

私にとっては、以下のような依存関係を追加します十分ではありませんでした：

compile 'com.facebook.fresco:animated-gif:1.9.0'

また、ファイル内のgradleバージョンをアップグレードする必要がありました：

Android/gradle/wrapper/gradle-wrapper.propertiesこのように：

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.Zip

また、ファイル内のビルドツールのバージョン：

Android/build.gradleこのように：

classpath 'com.Android.tools.build:gradle:3.0.1'
0
Shaked Sayag