1
votes

React Native Comment définir une image Gif sur l'écran de démarrage?

J'ai créé une nouvelle application mobile native React et je dois définir l'image gif sur l'écran de démarrage. tout exemple ou code source peut m'aider à le faire.

render() {
    return (
      <View style={styles.container}>
        {/*<BackgroundImage source={Images.splashScreen}*/}
        {/*       style = {{width: 315, height: 383}} />*/}

        <Image
            style={{width: 300, height: 200}}
            source={{uri: 'http://gifsstore.com/public/upload/gifs/15609427721560942769.gif'}} />
      </View>
    );
  }

react-native react-native-android react-native-ios

0 commentaires

3 Réponses :

0
votes

Prise en charge de GIF et WebP sur Android

Lors de la création de votre propre code natif, GIF et WebP ne sont pas pris en charge par défaut sur Android.

Vous devrez en ajouter modules optionnels dans android / app / build.gradle, selon les besoins de votre application.

<Image source={{uri: 'http://www.urltogif/image.gif'}} />

De plus, si vous utilisez GIF avec ProGuard, vous devrez ajouter cette règle dans proguard-rules.pro:

<Image source={require('./path/to/image/loading.gif')} />

exemple

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

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.10.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

0 commentaires

1
votes

vous pouvez également utiliser FastImage pour cette fonctionnalité. Il prend également en charge les fichiers gif

vous pouvez également essayer le code ci-dessous

import FastImage from 'react-native-fast-image'

   <FastImage
            style={{ width: "100%", height: "100%" }}
            source={{
              uri: "your URL", //give your url here
              priority: FastImage.priority.normal
            }}
            resizeMode={FastImage.resizeMode.contain}
            onLoad={() => {
              setTimeout(
                () => {
                //navigate to another screen after some times
                },
                15000
              );
            }}
          />

1 commentaires

@HusseinAbdAllahElGanzory N'est-il pas en train de charger un écran noir / blanc avant le gif animé?

8
votes

Ces réponses semblent un peu trompeuses. La question demande comment ajouter ceci à un écran de démarrage avec react native. Les solutions indiquent comment ajouter des gifs au projet mais pas comment les ajouter à un écran de démarrage.

Un écran de démarrage est censé être chargé avant que le bundle JS ne charge IE les méthodes render from react native ne sera pas accessible avant le chargement du bundle JS.

Solution: Android

Peut en fait avoir un gif directement dans l'écran de démarrage

Ressources: Puis-je ajouter une image au format GIF comme écran de démarrage

Regardez ce dépôt comme un exemple d'intégration d'un gif dans votre écran de démarrage. https://github.com/koral--/android-gif-drawable

Je l'ai effectivement fait fonctionner ce soir (12/04/2020) avec react native 0.62

Étapes :.

Suivez le didacticiel React-native-splash-screen pour créer /layout/launch_screen/xml
Ajoutez l'API android-gif-drawable
Apportez un gif dans le dossier dessinable, puis liez-le comme ceci:

layout / launch_screen.xml le @ drawable / tutorial est mon gif intitulé tutorial.gif

XXX

styles.xml

J'ai pu augmenter le flash de l'écran blanc en utilisant true

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
                <!-- Add the following line to set the default status bar color for all the app. -->

        <item name="android:statusBarColor">@color/app_bg</item>
        <!-- Add the following line to set the default status bar text color for all the app 
        to be a light color (false) or a dark color (true) -->
        <item name="android:windowLightStatusBar">false</item>
        <!-- Add the following line to set the default background color for all the app. -->
        <item name="android:windowBackground">@color/app_bg</item>
        <!-- Prevents white screen from appearing when opening the app -->
        <item name="android:windowDisablePreview">true</item>
    </style>
</resources>

Solution: iOS

Créer un écran de démarrage statique avec un élément de logo statique
Après le lancement, rendre un écran identique avec la version animée du logo

J'espère que cela aidera tout le monde!

0 commentaires