react-native - undefined 不是对象（评估“data.length”）

Question

我对 react-native 很陌生。我刚刚做了一个小应用程序。我想添加一些图片作为应用程序的介绍。所以我添加了“react-native-app-intro-slider”模块。然后我收到以下错误。

undefined 不是对象（评估“data.length”）

那是我的app.js。我不确定问题是什么。

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 's1',
    text: 'Best Recharge offers',
    title: 'Mobile Recharge',
    image: require('./intro/(1).jpg'),
    backgroundColor: '#20d2bb',
  },
  {
    key: 's2',
    title: 'Flight Booking',
    text: 'Upto 25% off on Domestic Flights',
    image: require('./intro/(2).jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: 's3',
    title: 'Great Offers',
    text: 'Enjoy Great offers on our all services',
    image: require('./intro/(3).jpg'),
    backgroundColor: '#22bcb5',
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
    };
  }
  _renderNextButton = () => {
  };
  _renderDoneButton = () => {
  };
  _onDone = () => {
    this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };
  _renderItem = ({ item }) => {
  };

  render() {
    if (this.state.showRealApp) {
      return (
        <View>
          <Text>aaaaa</Text>
        </View>
      );
    } else {
      return (
        <AppIntroSlider
          slides={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          renderDoneButton={this._renderDoneButton}
          renderNextButton={this._renderNextButton}
        />
      );
    }
  }
}

如何修复此错误？请帮我。

标签： react-native

Answer 1

错误是：slides={slides}必须data={slides}。

固定代码：

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 's1',
    text: 'Best Recharge offers',
    title: 'Mobile Recharge',
    image: require('./intro/(1).jpg'),
    backgroundColor: '#20d2bb',
  },
  {
    key: 's2',
    title: 'Flight Booking',
    text: 'Upto 25% off on Domestic Flights',
    image: require('./intro/(2).jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: 's3',
    title: 'Great Offers',
    text: 'Enjoy Great offers on our all services',
    image: require('./intro/(3).jpg'),
    backgroundColor: '#22bcb5',
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
    };
  }
  _renderNextButton = () => {
  };
  _renderDoneButton = () => {
  };
  _onDone = () => {
    this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };
  _renderItem = ({ item }) => {
  };

  render() {
    if (this.state.showRealApp) {
      return (
        <View>
          <Text>aaaaa</Text>
        </View>
      );
    } else {
      return (
        <AppIntroSlider
          data={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          renderDoneButton={this._renderDoneButton}
          renderNextButton={this._renderNextButton}
        />
      );
    }
  }
}