Json 在React Native中创建动态库，但不会显示图像

我正在尝试为我的应用程序中的所有角色创建一个动态照片库。当我点击特定角色的图库时，它会将我带到他们的图库，但不会显示任何图像。每个角色应该有3张图片作为他们的图库。虽然应用程序没有中断，但我确实收到一条警告消息，上面说：失败的道具类型：为图像提供的道具源无效。有人能看看我的代码，看看我错在哪里吗

我创建了一个JSON文件，每个字符都有图像

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

    export default CharacterImages;

我创建了一个单独的文件夹，以便图像可以动态进入

// 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: "Gallery",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: "bold"
      };
      constructor(props) {
        super(props);
        this.state = {
          CharacterImages
        };
      }
      render() {
        return (
          <View style={styles.container}>
            <SliderBox
              images={this.state.CharacterImages}
              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);

最后，用户可以通过以下方式访问特定配置文件中的每个角色库：

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

---

这里的问题是，您传递的是整个数据对象，而不是带有URL的字符串数组

尝试将图像属性更改为：

然后我建议使用字符串数组创建一个图像键对象，使您的字符图像为：

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"]
      }

] 导出默认字符图像

编辑

忘记了CharacterImages是一个对象数组！！！ 我还更新了常量，因为我没有关闭数组

在这里，您必须根据哪个条件决定要如何渲染图像。我将向您展示如何放置它们，以便渲染所有图像：

constructor(props){
    super(props)
    mergedArray=CharacterImages.map(item=> item.images).concat.apply([], mergedArray)

    this.state={
        images=mergedArr
    }    
}

---

在此之后，您可以在您的幻灯片盒中使用this.state.images

谢谢，我尝试过，但现在收到一条错误消息，说无法读取未定义的属性“length”。我想知道为什么…你把这个.state.CharacterImages.urlone改成这个.state.CharacterImages.images了吗？是的。它目前是这样的images={this.state.images}如果您使用的是我编写的代码，那么SliderBox中的“this.state.CharacterImages.images”确实有这样的代码。我想知道我是如何在构造函数中设置状态的？

constructor(props){
    super(props)
    mergedArray=CharacterImages.map(item=> item.images).concat.apply([], mergedArray)

    this.state={
        images=mergedArr
    }    
}