1

我正在尝试使用此处找到的 react-native-snap-carousel 构建轮播：https ://github.com/archriss/react-native-snap-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 允许在轮播的不同元素中显示不同的视图，就像我对上面所做的那样，但它似乎不起作用。

让我知道这是否需要更多解释！

4

0 回答 0