如何在反应原生快照轮播中有效地存储数据并使用数据和渲染项在轮播中访问它们

Question

我想将数据作为数组存储在我的轮播 js 文件中，并使用 data={this.state.data} renderItem={this.renderItem} 访问 <Carousel> 中的这些数据

我该怎么做

我的代码中有 8 张不同的图像作为数据

这就是我现在的代码：

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');

class TeamScroll extends Component {

  render() {
    return (
      <View >
      <View style={{ transform: [{ rotate: '-14deg' }] }}>
      <Carousel
      inactiveSlideOpacity={0.6}
      inactiveSlideScale={0.65}
      firstItem={1}
      sliderWidth={width}
      itemWidth={width / 3} >
      <Image
      source={require('./Images/logo-chepauk.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logo-dindigul.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logo-kanchi.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logo-karaikudi.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logo-kovai.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logomadurai.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logothiruvallur.png')}
      style={styles.logoStyle}  />
      <Image
      source={require('./Images/logotuti.png')}
      style={styles.logoStyle}  />
      </Carousel>
      </View>
      </View>
);
}
}
const styles = {
  logoStyle: {
    transform: [{ rotate: '14deg' }],
    width: width / 3,
    height: width / 3
    }
};
export default TeamScroll;

我想在里面使用data={this.state.data} renderItem={this.renderItem}并访问这些图像数据

我还想将这些图像存储在一个数组中并使用它们

Answer 1

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/logo-logomadurai.png'),
  require('./Images/logo-logothiruvallur.png'),
  require('./Images/logo-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;

试试这个，我没测试过。

Answer 2

如果您尝试创建可重用数组，您可以创建另一个名为 images-file.js 的文件并

import logo-chipauk from './Images/logo-chepauk.png'
... add other images the same way ...
import logo-logotuti from './Images/logo-logotuti.png'

export default images = [
   logo-chipauk,
   ... other images,
   logo-logotuti
];

然后，在任何其他文件中，

import images from 'image-file.js'