Question

我使用“ react-native-snap-carousel”，但是对于宽图像，它会剪切图像（我看到50％）。我在文档中找不到用于调整大小的道具。

如何调整尺寸以查看宽度的100％？

这是我的代码：

renderItem({ item, index }, contactId) {
    const {
        viewportWidth,
    } = this.state;
    const sourceURL = buildVisitCardUrl(contactId, item);
    return (
        <View
        style={{ width: viewportWidth }}
        key={index}
        >
        <Image
        style={{ width: '100%', height: this.hp(75) }}
        source={{ uri: sourceURL }}
        />
        </View>
    );
}

render() {
    <Modal
    animationType="slide"
    visible={open}
    onRequestClose={() => openModal(false, 'listCards')}
    >
        <View style={{ display: 'flex', alignItems: 'center' }}>
            <View>
            <Carousel
            layout="default"
            ref={(c) => { this.carousel = c; }}
            data={listVCard}
            renderItem={({ item, index }) => this.renderItem({ item, index }, contactId)}
            sliderWidth={viewportWidth} // Dimensions.get('window').width
            sliderHeight={viewportHeight} // Dimensions.get('window').height
            itemWidth={this.wp(95)} // 95% of viewportWidth
            contentContainerCustomStyle={{ display: 'flex', alignItems: 'center' }}
            vertical={false}
            />
            </View>
        </View>
    </Modal>
}

谢谢！

Answer 1

在使用react-native-snap-carousel时，我遇到了同样的问题，并且在Snap carousel Tips and tricks文档之后找到了使用 React native Dimensions 解决该问题的首选方法。使用此方法，您可以根据设备屏幕尺寸将滑块设置为100％。

第1步

将React Dimensions添加到您的项目中

import { Dimensions } from 'react-native';

第2步

将viewportWidth定义为常量

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

第3步

按照以下定义的常量添加轮播组件属性sliderWidth和itemWidth

<Carousel
     ref={(c) => { this._carousel = c; }}
     data={listVCard}
     renderItem={({ item, index }) => this.renderItem({ item, index }, contactId)}
     sliderWidth={viewportWidth}
     itemWidth={viewportWidth}
 />

使用react-native调整轮播中的图像大小

1 个答案: