Question

我正在寻求在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}}
   />
  ))}

我正在尝试通过自动淡入淡出过渡来更改图像，这个例子有点像，但我想在本机反应 example for images transition

Answer 1

我已经实现了react-native-snap-carousel

代码：

import React, { Component } from "react";
import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
import { Dimensions, StyleSheet,View,Text } from 'react-native';

const { width: screenWidth } = Dimensions.get('window')

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      entries: [
        {
          "ID": "001", 
          "Name": "001", 
          "thumbnail": "https://wallpapercave.com/wp/KaNO7Ya.jpg"
      },

      {
          "ID": "002", 
          "Name": "002", 
          "thumbnail": "https://wallpapercave.com/wp/ZxV8qRo.jpg"
      },

      {
          "ID": "003", 
          "Name": "003", 
          "thumbnail": "https://wallpapercave.com/wp/ytM5xOy.jpg"
      }
      ,

      {
          "ID": "004", 
          "Name": "004", 
          "thumbnail": "https://wallpapercave.com/wp/STgHPst.jpg"
      }
      ,

      {
          "ID": "005", 
          "Name": "005", 
          "thumbnail": "https://wallpapercave.com/wp/vg5q7pY.jpg"
      }
      ,

      {
          "ID": "006", 
          "Name": "006", 
          "thumbnail": "https://wallpapercave.com/wp/b2HsGgL.jpg"
      }
      ],
  }
}
    _renderItem ({item, index}, parallaxProps) {
        return (
            <View style={styles.item}>
                <ParallaxImage
                    source={{ uri: item.thumbnail }}
                    containerStyle={styles.imageContainer}
                    style={styles.image}
                    parallaxFactor={0.4}
                    {...parallaxProps}
                />
                <Text style={styles.title} numberOfLines={2}>
                    { item.Name }
                </Text>
            </View>
        );
    }

    render () {
        return (
          <View style={styles.container}>
            <Carousel
                sliderWidth={screenWidth}
                sliderHeight={screenWidth}
                itemWidth={screenWidth - 60}
                data={this.state.entries}
                renderItem={this._renderItem}
                hasParallaxImages={true}
            />
          </View>

        );
    }
}

const styles = StyleSheet.create({
  container:{
    marginTop:50
  },  
  item: {
    width: screenWidth - 60,
    height: screenWidth - 60,
  },
  imageContainer: {
    flex: 1,
    marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
    backgroundColor: 'white',
    borderRadius: 8,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: 'cover',
  },
})

输出：

https://gph.is/g/ZdoYdWw

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

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

Answer 2

请按照您的示例尝试以下代码：

尝试使用View标签样式backgroundColor:'#5f9ea0',//change color，并且不设置图像背景。

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 effect上，请参见链接：https://www.youtube.com/watch?v=K2B0vVIHV_A

Answer 3

尝试使用此软件包react-native-image-slider-show听到示例example for how to used it

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

3 个答案: