Question

我设法（或者至少我以为我设法）从为图像创建的json文件夹中动态引入图像。但是，我现在遇到的问题是每个个人资料的画廊都有相同的图像，即荷马·辛普森的作品。我需要每个配置文件都拥有自己的带有图片集的图库，这些图片集位于json文件中。有人可以告诉我我在做什么错吗？

这是我设置包含图像的JSON文件夹的方式：

//CharacterImages.js
    const CharacterImages = [
          {
              id: "1",
              name: "Homer Simpson",
              images:["https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
                "https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
                "https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg"]
            },
            {
              id: "2",
              name: "Marge Simpson",
              images:["https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg",
                "https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg",
                "https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg"]
            },
            {
              id: "3",
              name: "Bart Simpson",
              images: ["https://i.pinimg.com/564x/fe/18/af/fe18af309234936e231fa107c6d2b4c7.jpg",
                "https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg",
                "https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg"]
            },
            {
              id: "4",
              name: "Lisa Simpson",
              images:["https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
                "https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
                "https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg"]
            }
        ]
        export default CharacterImages;

我为图像创建了一个ImageGallery组件：

//ImageGallery.js
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { SliderBox } from "react-native-image-slider-box";
import { withNavigation } from "react-navigation";
import CharacterImages from "../Data/CharacterImages";

class ImageGallery extends React.Component {
  static navigationOptions = {
    title: "Character Gallery",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: "bold"
  };
  constructor(props) {
    super(props);
    this.state = {
      images: []
    };
  }
  componentDidMount() {
    let images = CharacterImages[0].images;
    this.setState({ images });
  }
  render() {
    return (
      <View style={styles.container}>
        <SliderBox
          images={this.state.images}
          sliderBoxHeight={900}
          onCurrentImagePressed={index =>
            console.warn(`image ${index} pressed`)
          }
          dotColor="yellow"
          inactiveDotColor="white"
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});
export default withNavigation(ImageGallery);

最后，这是进入个人资料页面后进入画廊的方式。该按钮位于配置文件屏幕的标题中。

    <Button
        onPress={() => navigation.navigate("ImageGallery")}
        title="Gallery"
        color="#f6c945"
      />
    )
  });

Answer 1

问题可能是您始终在CharacterImages中使用0位置，或者是否有任何函数在组件安装后选择数组位置？

动态为在React Native中创建的每个配置文件页面引入图像

1 个答案: