Невозможно использовать react-native-snap-carousel

Я бы хотел использовать response-native-snap-carousel, но когда я пытаюсь запустить его, у меня появляется ошибка :(

пример:

import Carousel from 'react-native-snap-carousel';

export class MyCarousel extends Component {

_renderItem ({item, index}) {
    return (
        <View style = {styles.slide}>
            <Text style = {styles.title}>{ item.title }</Text>
        </View>
    );
}

render () {
    return (
        <Carousel
          ref = {(c) => { this._carousel = c; }}
          data = {this.state.entries}
          renderItem = {this._renderItem}
          sliderWidth = {sliderWidth}
          itemWidth = {itemWidth}
        />
    );
}}

Мой код:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Carousel from 'react-native-snap-carousel';

export default class App extends React.Component {
 _renderItem ({item, index}) {
   return (
      <View style = {styles.slide}>
          <Text style = {styles.title}>{ item.title }</Text>
      </View>
);}
 render () {
   return (
    <Carousel
      ref = {(c) => { this._carousel = c; }}
      data = {this.state.entries}
      renderItem = {this._renderItem}
      sliderWidth = {150}
      itemWidth = {100}
    />
); 
}} 
    const styles = StyleSheet.create({
     container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   }});

Скриншот то же самое на app.js реагировать Native

У меня есть проблема (такая же, как и у меня) ссылка на Github Issue

Но не отвечайте, и проблема будет близка

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
8 319
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как видно на скриншоте, this.state.entries - это null.

Вы должны его инициализировать:

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      entries: [],
    }
  }
  _renderItem ({item, index}) {
    return (
      <View style = {styles.slide}>
          <Text style = {styles.title}>{ item.title }</Text>
      </View>
  );}

  render () {
    return (
      <Carousel
        ref = {(c) => { this._carousel = c; }}
        data = {this.state.entries}
        renderItem = {this._renderItem}
        sliderWidth = {150}
        itemWidth = {100}
      />
 ); 
}}

В этом примере entries: [] ничего не отображает, поскольку в нем нет объекта. Вы можете инициализировать его желаемыми данными:

entries: [
  { title: 'hello' },
  { title: 'world' },
]

Кстати, эта проблема не имеет ничего общего с самим плагином, даже если они могли его поймать.

Большое спасибо @poptocrack :)

Tom Sita 21.08.2018 11:01

Другие вопросы по теме