为什么使用 react native snap carousel 没有显示数据

Question

使用 react native snap carousel 时未显示数据

我已经这样做了：

import React, { Component } from 'react';
import { Dimensions, View, Image } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { height, width } = Dimensions.get('window');

const images = [
  require('./Images/logo-chepauk.png'),
  require('./Images/logo-dindigul.png'),
  require('./Images/logo-kanchi.png'),
  require('./Images/logo-karaikudi.png'),
  require('./Images/logo-kovai.png'),
  require('./Images/logomadurai.png'),
  require('./Images/logothiruvallur.png'),
  require('./Images/logotuti.png'),
];

class TeamScroll extends Component {
  renderItem = ({ item }) => {
    return <Image source={item} style={styles.logoStyle} />;
  };

  render() {
    return (
      <View>
        <View
          style={{
            transform: [
              {
                rotate: '-14deg',
              },
            ],
          }}>
          <Carousel
            inactiveSlideOpacity={0.6}
            inactiveSlideScale={0.65}
            firstItem={1}
            sliderWidth={width}
            itemWidth={width / 3}
            data={images}
            renderItem={this.renderItem}
          />{' '}
        </View>{' '}
      </View>
    );
  }
}

const styles = {
  logoStyle: {
    transform: [
      {
        rotate: '14deg',
      },
    ],
    width: width / 3,
    height: width / 3,
  },
};

export default TeamScroll;

我在数组中使用的 8 个不同的图像是我需要显示给用户的数据，但是在这个过程中数据没有显示 我想在轮播中使用 data 和 renderItem 道具来做到这一点 我在访问这些数据时在代码中做错了什么

Answer 1

我刚刚用远程图像尝试了您的代码，没有任何问题。您确定要显示的图像正确地位于您的项目树中吗？

结果如下：

您可以在下面找到更新后的代码。请注意，我添加了{ overflow: 'visible' } 以防止幻灯片被剪切。

顺便说一句，我不知道您遵循哪种代码格式，但您与 React 的标准相差甚远，这使得您的代码几乎无法阅读。我建议你看一些 React Native 的 examples 和 plugins 以熟悉 React 的代码格式。如果您需要帮助，您甚至可以使用 Prettier。

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

const { height, width } = Dimensions.get('window');

const images = [
  'https://unsplash.it/300/?random',
  'https://unsplash.it/350/?random',
  'https://unsplash.it/400/?random',
  'https://unsplash.it/450/?random',
  'https://unsplash.it/500/?random',
  'https://unsplash.it/550/?random',
  'https://unsplash.it/600/?random',
];

class TeamScroll extends Component {
  renderItem = ({ item }) => {
    return <Image source={{ uri: item }} style={styles.logoStyle} />;
  };

  render() {
    return (
      <View>
        <View
          style={{
            transform: [
              {
                rotate: '-14deg',
              },
            ],
          }}>
          <Carousel
            inactiveSlideOpacity={0.6}
            inactiveSlideScale={0.65}
            firstItem={1}
            sliderWidth={width}
            itemWidth={width / 3}
            data={images}
            renderItem={this.renderItem}
            containerCustomStyle={{ overflow: 'visible' }}
            contentContainerCustomStyle={{ overflow: 'visible' }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  logoStyle: {
    transform: [
      {
        rotate: '14deg',
      },
    ],
    width: width / 3,
    height: width / 3,
  },
});

export default TeamScroll;