未定义不是对象(评估“ data.length”)

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

未定义不是对象(评估“ data.length”)

That is my app.js. I am not sure what the problem is.

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}
        />
      );
    }
  }
}

如何解决这个错误?请帮我。

评论
gquia
gquia

The mistake was: slides={slides} must be 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}
        />
      );
    }
  }
}
点赞
评论