映射在本地JSON文件中创建的图像数组并进行渲染 [英] Mapping through an Array of Images created in a local JSON File and rendering it

问题描述

我正在学习RN，无法设置映射方法来遍历我在本地JSON文件中创建的一些播放器的图像数组，并将其呈现在各自的个人资料页面中.

I am learning RN and I am having trouble setting up a mapping method to go through an array of images of some players that I created in a local JSON file, and render them in their respective profile pages.

这就是我设置json的方式.

This is how I have set my json.

//PlayerImages.js    
const PlayerImages = [
              {
                  id: "1",
                  name: "Cristiano Ronaldo",
                  images:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                },
                {
                  id: "2",
                  name: "Lionel Messi",
                  images:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                },
                {
                  id: "3",
                  name: "Neymar",
                  images: mages:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                },
                {
                  id: "4",
                  name: "Gabriel de Jesus",
                  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: "5",
                  name: "Roberto Firmino",
                  images:mages:["https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000485852530.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg",
                    "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/05/18/15582064666477.jpg"]
                }
        ]
        export default PlayerImages;

这就是设置ImageGallery组件的方式.不幸的是，我设置componentDidMount的方式在所有配置文件中都显示了Cristiano Ronaldos图像.当您点击个人资料上的图库按钮时，如何确定每个个人资料上是否有该特定玩家的照片?

This is how I have the ImageGallery component set up. Unfortunately, the way I have componentDidMount set up, shows Cristiano Ronaldos images in all profiles. How can I map it in order to make sure that each profile has the pictures of that particular player when you tap the gallery button on their profile?

//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 PlayerImages from "../Data/PlayerImages";

    class ImageGallery extends React.Component {
      static navigationOptions = {
        title: "Player Gallery",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: "bold"
      };
      constructor(props) {
        super(props);
        this.state = {
          images: []
        };
      }

      componentDidMount() {
        let images = PlayerImages[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);

最后，当您进入玩家资料页面时，您应该可以通过点击标题中的按钮来访问他们的画廊.正如我在文章前面提到的那样，当您点击它时，只会得到克里斯蒂亚诺·罗纳尔多的图像.

Finally, when you are on the players profile, you should have access to their gallery by tapping the button in the header. As I mentioned earlier in the post, when you tap it, you get only the images of Cristiano Ronaldo.

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

推荐答案

使用导航参数传递要显示图像的播放器的ID或播放器的索引，然后使用它来获取播放器的图像，现在，您正在使用数组第0个索引处的图像.

Pass the id of the player or the index of the player you want to display images of using navigation parameters , then use it to get the images of the player, right now you are using images at the 0th index of array.

componentDidMount() {
    let images = PlayerImages[0].images;
    this.setState({ images });
}

将此更改为

componentDidMount() {
    let images = PlayerImages[index].images;  //index is the index of the player whose images you want to show
    this.setState({ images });
}

这篇关于映射在本地JSON文件中创建的图像数组并进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！