Вывести несколько разнообразных элементов с реагировать-родной-оснастка-карусель? - PullRequest
Новая
       17

Вывести несколько разнообразных элементов с реагировать-родной-оснастка-карусель?

0 голосов
/ 24 июня 2019

Я пытаюсь построить Карусель, используя реагирующую нативную карусель, найденную здесь: https://github.com/archriss/react-native-snap-carousel. Однако примеры, которые я нашел до сих пор, демонстрируют только один способ: если вы хотите выводить один и тот же формат снова и снова. Например, у вас есть список изображений, которые вы хотите показать на карточках, по которым пользователь может перемещаться с помощью прокрутки или пролистывания.

Однако я хочу построить что-то, что 1-й экран: список / текст 2-й экран: карта 3-й экран: сетка кнопок

Текущий код, который я разработал (после нескольких проб и ошибок) и который в основном копируется онлайн, выглядит следующим образом: (он показывает только 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, который я использовал, позволял показывать разные виды в разных элементах карусели, как я это делал выше, но, похоже, это не работает.

Дайте мне знать, если вам нужно больше объяснений!

...