Question

我想将数据存储在我的carousel js文件中，并使用<Carousel>

在

data={this.state.data}
renderItem={this.renderItem}

内访问此数据

我该怎么做

我的代码中有8个不同的图像

这就是我现在的代码：

＆＃13;

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;

＆＃13;

我想在里面使用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'

如何有效地存储反应原生捕捉轮播中的数据，并使用数据和放大器在旋转木马内访问它们。 renderItem

2 个答案: