react-native-snap-carousel 全屏 + 传递内容

Question

我有一个两部分的问题。我目前正在使用react-native-snap-carousel，在这里找到：https://github.com/meliorence/react-native-snap-carousel。

我的代码如下所示：

    carouselItems: [
        {
            image: require('../assets/images/placeholder-slide.png'),
        },
        {
            image: require('../assets/images/slide2.png'),
        },
        {
            //I want to pass <View> here with content and a button
        },
    ]

_renderItem({ item, index }) {
    <View>
        <Image source={item.image} />
    </View>
}
    
    <SafeAreaView style={styles.body}>
        <Carousel
            layout={"default"}
            ref={ref => this.carousel = ref}
            data={this.state.carouselItems}
            sliderWidth={phoneWidth}
            itemWidth={phoneWidth}
            renderItem={this._renderItem}
            inactiveSlideOpacity={1}
            inactiveSlideScale={1}
            slideStyle={{ width: phoneWidth }}
            onSnapToItem={index => this.setState({ activeIndex: index })} />   
    
    
        //This is the block I want to pass in the 3rd slide of the carousel 
        <View>
            <Text>Some Text Here</Text>
            <button>Button here</button>
        </View>
    </SafeAreaView>

body: {
    flex: 1,
    position: 'relative',
},

所以轮播中的前两项是全角图像，最后一张幻灯片将包含内容和 2 个按钮。如何将<View> 中的项目传递到carouselItems？

我的第二个问题是如何使轮播全屏显示。这是我的模拟器的截图：https://ibb.co/ZNZKRqm

如您所见，旋转木马上方和下方都有灰色区域。我不相信这与轮播有关，我想也许默认情况下这是全宽的？但我也看到应用程序也针对这个灰色空间。

Answer 1

1. 部分

carouselItems: [
        {
            image: require('../assets/images/placeholder-slide.png'),
        },
        {
            image: require('../assets/images/slide2.png'),
        },
        {
            content:
<View>
            <Text>Some Text Here</Text>
            <button>Button here</button>
        </View>
        },
    ]

_renderItem({ item, index }) {
//return item.content if exists
   return item?.content || <View> 
        <Image source={item.image} />
    </View>
}
    
    <SafeAreaView style={styles.body}>
        <Carousel
            layout={"default"}
            ref={ref => this.carousel = ref}
            data={this.state.carouselItems}
            sliderWidth={phoneWidth}
            itemWidth={phoneWidth}
            renderItem={this._renderItem}
            inactiveSlideOpacity={1}
            inactiveSlideScale={1}
            slideStyle={{ width: phoneWidth }}
            onSnapToItem={index => this.setState({ activeIndex: index })} />   
    </SafeAreaView>

1. 部分 灰色空间是因为SafeAreaView。这只会出现在带有缺口的设备上。您可以使用 style 属性为其设置自定义背景颜色。