React-Native-Swiper图片仅在ANDROID上溢出

时间:2019-08-19 23:49:13

标签: react-native-android react-native-flatlist react-native-swiper

我只有Android上的react-native-swiper有问题。相同的代码适用于iOS!

下面是发生的事情的图像:

enter image description here

蓝色区域应该是正方形,并且所有图像都应在其中。这样的事情(我在这里只渲染1张图片):

enter image description here

这是我的代码的样子:

    renderSwiper = () => {
        const images = this.props.data.item[1].images;
        let swiperImages = images.map((image, index) => {
            let priority = FastImage.priority.normal;
            if (index === 0)
                priority = FastImage.priority.high;
            return (
                <TouchableWithoutFeedback key={index} onPress={this.routeToListingDetails} >
                    <FastImage
                        style={styles.imageStyle}
                        source={{uri: image, priority: priority}}
                    />
                </TouchableWithoutFeedback>
            )
        })
        return (
            <View style={{ aspectRatio: 1, width: '100%'}}>
                <Swiper 
                    loop={false} 
                    paginationStyle={styles.swiperPaginationStyle}
                >
                    {swiperImages}
                </Swiper>
            </View>
        );
    }

    render(){
        return (
            <View style={styles.container} >

                <View style={{ borderColor: 'blue', borderWidth: 2 }}>
                    {this.renderSwiper()}
                </View>

            </View>
        )
    }

const styles = StyleSheet.create({
    container:{
        width:'50%',
        alignItems:'center',
        marginBottom:'4%',
        padding:'2%',
    },
    imageStyle:{
        resizeMode: "cover",
        width: "100%",
        aspectRatio:1
    }
})

0 个答案:

没有答案