React native 反应本机动态图像滑块过渡不透明度

我希望在react native中实现带有淡入淡出过渡的动态图像的滑块，并使用不透明度播放。 我所做的是

     changeBackgroundImageNew = ()=>{
     const TIME_TRANSITION = 4500
    let images_length = this.props.AppStore.barbershop_details.images.length
    let index_image = 0;
    setInterval(()=>{

        if(this.state.index_image == images_length-1){
          index_image = 0
        }else{
          index_image= index_image+1
        }
        this.setState({index_image})
    },4000)
    Animated.loop(
      Animated.sequence([
        Animated.delay(1500),

        Animated.parallel([
          Animated.timing(this.state.img_background_opacity, {
            toValue: 0,
            duration: TIME_TRANSITION
          }),
          Animated.timing(this.state.img_background_opacity2, {
            toValue: 1,
            duration: TIME_TRANSITION
          })
        ]),
        Animated.delay(1500),
        Animated.parallel([
          Animated.timing(this.state.img_background_opacity2, {
            toValue: 0,
            duration: TIME_TRANSITION
          }),
          Animated.timing(this.state.img_background_opacity, {
            toValue: 1,
            duration: TIME_TRANSITION
          })
        ])
      ])
    ).start(() => {
    });
  }

渲染代码

  {AppStore.barbershop_details && AppStore.barbershop_details.images.map((image,i)=>(
     <AnimatedImageBackground
     key={i}
     resizeMode="cover"
     resizeMethod="resize"
     style={[
       style.img_background,
       { opacity: i == this.state.index_image?this.state.img_background_opacity:this.state.img_background_opacity2 }
     ]}
     source={{uri:image}}
   />
  ))}

我正在尝试使用自动设置动画的淡入淡出过渡来更改图像， 有点像这个例子，但我想用react native 我已经实施了

代码：

输出：

您可以使用此组件并获得所需的输出，而不是创建自己的自定义组件。您可以创建自定义图像容器，还可以设置淡入淡出持续时间等。有关详细信息，请参阅其文档

---

英语不是我的母语；请原谅我的错误。

请根据您的示例尝试以下代码：

尝试使用视图标记样式backgroundColor:'5f9ea0'，//更改颜色，并且不为其设置图像背景

imoprt { ScrollView, Dimensions} from 'react-native';

render(){
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;

return(
    <ScrollView
        horizontal={true}
        pagingEnabled= {true}
        showHorizontalScrollIndicator={true}
    >
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 1</Text>
        </View>
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 2</Text>
        </View>
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 3</Text>
        </View>



);

}

---

我希望它能帮助你。关于fad效果，请参见链接：

尝试使用此软件包反应本机图像滑块显示收听示例

嘿，我不想在软件包中使用这样的快照转盘。。这不是我要找的。。它不会产生淡入淡出的效果。嘿，不会。这不是淡入淡出效果，也不是自动滚动。我会尽快回复你。

imoprt { ScrollView, Dimensions} from 'react-native';

render(){
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;

return(
    <ScrollView
        horizontal={true}
        pagingEnabled= {true}
        showHorizontalScrollIndicator={true}
    >
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 1</Text>
        </View>
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 2</Text>
        </View>
        <View style={{          
            flex:1,
            marginTop:20,
            width: screenWidth,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
                <Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />

                // add your UI code for create like 
                <Text> Screen 3</Text>
        </View>



);

}