react-native-snap-carousel全屏设置及自定义轮播内容传递问题

你可以通过给轮播数据加类型标识、在renderItem中按类型区分渲染的方式实现需求，具体修改如下：

• 第一步：调整carouselItems数组结构，给每个条目增加类型标识，区分图片类型和自定义视图类型，需要的自定义内容也可以存在对应条目中：

carouselItems: [
    {
        type: 'image',
        image: require('../assets/images/placeholder-slide.png'),
    },
    {
        type: 'image',
        image: require('../assets/images/slide2.png'),
    },
    {
        type: 'custom',
        text: 'Some Text Here',
        btnText: 'Button here'
    },
]

• 第二步：修改_renderItem方法，按条目类型渲染对应内容：

_renderItem({ item, index }) {
    return (
        <View style={{width: phoneWidth, height: phoneHeight}}>
            {item.type === 'image' ? (
                <Image source={item.image} style={{width: '100%', height: '100%', resizeMode: 'cover'}} />
            ) : (
                <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                    <Text>{item.text}</Text>
                    <Button title={item.btnText} onPress={() => {}} />
                </View>
            )}
        </View>
    )
}

如果你的自定义视图逻辑很复杂，也可以直接把组件存在数据条目中，渲染时直接调用即可。

上下出现空白一般是安全区边距、组件默认边距、容器高度不足导致的，按以下步骤修改即可：

1. 调整SafeAreaView样式，禁用默认安全区内边距，如果你不需要适配顶部状态栏/底部Home条的话，也可以直接把Carousel移到SafeAreaView外面

body: {
    flex: 1,
    position: 'relative',
    padding: 0,
    margin: 0,
}

2. 给Carousel组件增加占满父容器的样式，同时清除默认的上下内边距：

<Carousel
    layout={"default"}
    ref={ref => this.carousel = ref}
    data={this.state.carouselItems}
    sliderWidth={phoneWidth}
    sliderHeight={phoneHeight}
    itemWidth={phoneWidth}
    itemHeight={phoneHeight}
    renderItem={this._renderItem}
    inactiveSlideOpacity={1}
    inactiveSlideScale={1}
    slideStyle={{ width: phoneWidth, height: phoneHeight, marginVertical: 0 }}
    style={{flex: 1}}
    contentContainerStyle={{paddingVertical: 0, marginVertical: 0}}
    onSnapToItem={index => this.setState({ activeIndex: index })} 
/>

3. 提前通过Dimensions获取屏幕的宽高，注意横竖屏切换时要重新计算：

import { Dimensions } from 'react-native';
const { width: phoneWidth, height: phoneHeight } = Dimensions.get('window');

修改完成后轮播就会占满整个屏幕，上下灰色空白会自动消除。

内容的提问来源于stack exchange，提问作者JImmy G