为什么使用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个不同的图像是我需要向用户显示的数据 但是这个程序没有显示数据 我想在carousel中使用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;