Не могу использовать реагирующую нативную карусель

Question

Я хотел бы использовать 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 реагирует на родной

Я вижу проблему (такую ​​же как у меня), ссылку на Github Issue

Но не отвечай а вопрос быть близким

Answer 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' },
]

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