Question

我正在尝试使用在https://github.com/archriss/react-native-snap-carousel中找到的react-native-snap-carousel构建一个Carousel。但是，到目前为止，我发现的示例仅展示了一种方式：如果您要一遍又一遍地输出相同的格式。例如，您有一个要显示在卡片上的图像列表，用户可以通过滚动或滑动来浏览它们。

但是，我想构建具有以下特征的东西：第一个屏幕：列表/文本第二屏：地图第三屏：按钮网格

我想出的当前代码（经过多次尝试和错误之后），并且大多数情况下是在线复制的：（它仅在不同页面上显示item1 item2 item3 item4，而项目输出中没有任何变化在旋转木马中

导出默认类App扩展了React.Component {

constructor(props){
    super(props);
    this.state = {
      region: this.getInitialState(),
        carouselItems: [
        {
            title:"Item 1"
        },
        {
            title:"Item 2"
        },
        {
            title:"Item 3"
        },
        {
            title:"Item 4"
        },
        {
            title:"Item 5"
        }
    ]}
}

getInitialState() {
  return {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

}

_renderItem({item,index}){
    return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <Text style={{color:'#fff'}} >{item.title}</Text>

        </View>
    )
}

render() {
    return (
    <SafeAreaView style={styles.container}>



        <Carousel
                data={this.state.carouselItems}
                sliderWidth={250}
                itemWidth={250}
                renderItem={this._renderItem}
            >
            <MapView style={styles.map}
            region={this.state.region}
            onRegionChange={this.onRegionChange}
            />
            </Carousel>


    </SafeAreaView>
    );
}

}

我以前使用过的旋转木马npm可以显示与旋转木马不同元素的不同视图，就像我对上面的操作所做的一样，但这似乎行不通。

让我知道是否需要更多说明！

用react-native-snap-carousel输出多个不同的元素？

0 个答案: