React Native Swiper 多張圖片

Question

我正在使用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 只是一個圖像。

Answer 1

我找到了解決方案，並將 Swiper 更改為Carousel 。

Answer 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} />

Answer 3

我建議您使用 react-native-snap-carousel 按照以下鏈接了解更多詳細信息https://www.npmjs.com/package/react-native-snap-carousel

Answer 4

您可以通過以下代碼執行此操作；

<Swiper removeClippedSubviews={false}>

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

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

</Swiper>