React Native Swiper 多个图像答案

【问题标题】：React Native Swiper multiple imagesReact Native Swiper 多个图像
【发布时间】：2017-05-18 14:45:45
【问题描述】：

我正在使用react-native-swiper，但我在文档中没有找到任何解决我的问题的方法。目前它一次给我看一张照片。但我想要一张半，而且总是一张一张地滑动。有没有可能，因为幻灯片有严格的宽度。

我会实现的设计：

有我当前的代码：

class Featured extends Component {
    /**
     * Render the featured box
     */
    renderFeatured() {
        return this.props.featured.data.items.map(object => (
                <View style={styles.slide} key={object.id}>
                    <FeaturedBox
                        id={object.id}
                        image={Helpers.getPrimaryImage(object.images)}
                        text={object.name}
                    />
                </View>
            )
        );
    }

    render() {
        if (Helpers.isObjectEmpty(this.props.featured)) {
            return (
                <View />
            );
        }
        return (
            <View>
                <Swiper
                    style={styles.wrapper}
                    height={150}
                    horizontal={false}
                    showsPagination={false}
                >
                    {this.renderFeatured()}
                </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

FeaturedBox 基本上只是一张图片。

【问题讨论】：

标签： javascript react-native swiper

【解决方案1】：

我找到了解决办法，把Swiper改成Carousel。

【讨论】：

你用 react-native-swiper 找到其他方法了吗？

【解决方案2】：

我和你有同样的问题。

我尝试了很多次，最终解决了这个问题，并为这些用例创建了 npm 包。

首先，您可以通过设备在图像中添加特定宽度来解决此错误。

如果您的用例是添加多个图像，那么您可以使用以下方法轻松解决。

希望react-native-image-swiper能帮到你。

用法

import {Dimensions} from 'react-native';
import ImagesSwiper from "react-native-image-swiper";
const { width, height } = Dimensions.get("window");

<ImagesSwiper width={width} height={height-400} />

【讨论】：

【解决方案3】：

我建议你使用 react-native-snap-carousel 请点击以下链接了解更多详情 https://www.npmjs.com/package/react-native-snap-carousel

【讨论】：

【解决方案4】：

您可以通过以下代码做到这一点；

<Swiper removeClippedSubviews={false}>

<View style={{width: screenWidth - 100}}></View>

<View style={{marginLeft: - 100}}> </View>

</Swiper>

【讨论】：

如果他有更多幻灯片要展示（包括第二张），这将不起作用