我正在使用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只是一个图像。
我找到了解决方案,并将Swiper更改为Carousel。
您可以通过以下代码执行此操作;
<Swiper removeClippedSubviews={false}>
<View style={{width: screenWidth - 100}}></View>
<View style={{marginLeft: - 100}}> </View>
</Swiper>
我和你有同样的问题。
我尝试了很多次,最终解决了这个问题,我为这些用例创建了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} />