在React Native简介滑块上

问题描述

我对React Native非常陌生（而且堆栈溢出）。我正在使用使用React Native App简介滑块的应用程序。在其中一个简介屏幕中，我需要淡入淡出4张图像，以演示用户将在该实际应用程序中看到的屏幕（无需按下按钮）。我尝试了5种不同的方法来完成此操作，但无法使其正常工作。我的问题：

试图弄清楚如何将第一张图片的位置设置为绝对位置，以便重叠并只淡入/淡出屏幕中的图片，因为所有图片都具有样式
使用Animated.Image，我可以淡入和淡出，但它不会在图像阵列中循环显示。

我确定我缺少简单的东西，或者我缺少RN知识（和一般的编码）是问题所在。欢迎任何建议或链接。

在const slides = []中，在有问题的幻灯片上，我将图像放在一个数组中 { 关键：2 标题：“布拉”，文字：“ Blah”， imageCycle：[ require（'./ assets / images / screenshot_1.png'）， require（'./ assets / images / screenshot_2.png'）， require（'./ assets / images / screenshot_3.png'）， require（'./ assets / images / screenshot_4.png'）， ]， backgroundColor：'＃8e8e93'， }

export default function App() { 
  const [opacity] = useState(new Animated.Value(0));
  const [currentIndex,setCurrentIndex] = useState(0);

  startAnimation = () => {
      opacity.setValue(0)
      Animated.loop(
        Animated.sequence([
        Animated.timing(opacity,{
          tovalue: 1,duration: 3000,useNativeDriver: true,}),Animated.timing(opacity,{
          tovalue: 0,duration: 500,})
      ]),{
        iterations: 5
      }
      ).start();
    }
  
    useEffect(() => { 
      if (currentIndex > 1) {
        setCurrentIndex(0);
      } else {
        setCurrentIndex(currentIndex + 1);
      }  
      startAnimation();
    },[]);

    const _renderItem = ({ item }) => {
    return (
      <Animated.View
        style={{
          flex: 1,backgroundColor: item.backgroundColor,alignItems: 'center',justifyContent: 'space-around',paddingBottom: 100,paddingTop: 100
        }}>
        <Text style={styles.title}>{item.title}</Text>
        {item.icon && (
            <Ionicons
            style={styles.icon}
            name={item.icon}
            size={175}/>
        )}
        {!item.icon && item.image && (
          <Image style={styles[item.imageStyle] || styles.image} source=.      {item.image}/>
        )}
        {item.imageCycle && (
          <Animated.Image style={[
            styles.image,{opacity: opacity}]} source={item.imageCycle[currentIndex]} />
        )}
        <Text style={styles.text}>{item.text}</Text>
      </Animated.View>
    );
  };

在样式表中：

        In Stylesheet:
  image: {
    alignItems: 'center',height: 300,width: 140,marginTop: 10,marginBottom: 70,},shoeStyle: {
    alignItems: 'center',height: 280,tintColor: 'white',width: 280,

这会使第一张图像淡入和淡出，但不会在图像中循环显示。如果我改变

          useEffect(() => { 
    if (currentIndex) {
      setCurrentIndex(0);
    } else {
      setCurrentIndex(currentIndex + 1);
    }  
    startAnimation();
  },[]);

第二张图像淡入和淡出。我觉得我没有正确映射到图像，但是尝试许多其他方法也没有用。有人可以帮忙或指出正确的方向吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fade overlap react-animated react-native