加载随机图像反应本机

Question

我尝试从数组中随机加载gif。我尝试了几种方法，但都没有奏效。我要么收到错误消息，要么图像就不会出现。

版本 1（结果：图像未显示）：

var myPix = new Array("../assets/class/emojis/correct/clapping_hands.gif", "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif","../assets/class/emojis/correct/confetti_ball.gif","../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={theImage}
/>
</View>

版本2（结果：“无效调用”）

var myPix = new Array("../assets/class/emojis/correct/clapping_hands.gif", "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif","../assets/class/emojis/correct/confetti_ball.gif","../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={require(myPix[randomNum])}
/>
</View>

版本3（结果：无法加载图像）：

  const [theImage, setTheImage] = useState();
React.useEffect(() => {
    var myPix = new Array(
      "../assets/class/emojis/correct/clapping_hands.gif",
      "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif",
      "../assets/class/emojis/correct/confetti_ball.gif",
      "../assets/class/emojis/correct/flexed_biceps.gif",

    );
    var randomNum = Math.floor(Math.random() * myPix.length);
    var x = myPix[randomNum];
    setTheImage_Correct(x);

source={image_correct 

有什么想法吗？

Answer 1

确保您已经实现了正确的环境来显示GIF，如下所述：

对于RN

默认情况下，GIF图像在Android反应原生应用程序中不受支持。您需要设置使用壁画来显示gif图像。代码：

编辑您的android/app/build.gradle文件，并添加以下代码:

依赖项：{

...

compile 'com.facebook.fresco:fresco:1.+'

// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'

// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.+'
compile 'com.facebook.fresco:webpsupport:1.+' 

}

然后你需要再次捆绑应用程序，你可以像这样用两种方式显示gif图像。

1-> <Image 
        source={require('./../images/load.gif')}  
        style={{width: 100, height: 100 }}
    />

2-> <Image 
        source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  
        style={{width: 100, height:100 }} 
    />
    enter code here

对于RN

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

implementation 'com.facebook.fresco:animated-gif:2.0.0'   //use

如本期所述：如何在React Native中显示动画gif？