如何创建包含图像标题和描述的文本数组？答案

【问题标题】：How to create an array of text that includes title and description for images?如何创建包含图像标题和描述的文本数组？
【发布时间】：2021-03-28 20:10:33
【问题描述】：

我在我的应用程序中添加了一些从数组中调用的图片。现在我需要另一个数组来包含包含这些图像的标题和一些描述的文本。如何创建这个文本数组，当单击图像时，将显示该图像的特定标题和描述？

这是在应用主屏幕上显示图片的代码。

import { StatusBar } from "expo-status-bar";
import Icon from "react-native-vector-icons/FontAwesome";

import {
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  Dimensions,
  TouchableOpacity,
} from "react-native";

import Header from '../components/Header';



var loadImageCount = 6;
export default class  PicFlatlist extends Component {
   constructor(props){
     super(props);
     this.state = {
       loadImageCount: 6,
       images: [
         { url: require("../assets/pic_1.jpg"), id: 1 },
         { url: require("../assets/pic_2.jpg"), id: 2 },
         { url: require("../assets/pic_3.jpg"), id: 3 },
         { url: require("../assets/pic_4.jpg"), id: 4 },
         { url: require("../assets/pic_5.jpg"), id: 5 },
         { url: require("../assets/pic_6.jpg"), id: 6 },
         { url: require("../assets/pic_7.jpg"), id: 7 },
         { url: require("../assets/pic_8.jpg"), id: 8 },
         { url: require("../assets/pic_9.jpg"), id: 9 },
         { url: require("../assets/pic_10.jpg"), id: 10 },
         { url: require("../assets/pic_11.jpg"), id: 11 },
         { url: require("../assets/pic_12.jpg"), id: 12 },
         { url: require("../assets/pic_13.jpg"), id: 13 },
         { url: require("../assets/pic_14.jpg"), id: 14 },
         { url: require("../assets/pic_15.jpg"), id: 15 },
         { url: require("../assets/pic_16.jpg"), id: 16 },
         { url: require("../assets/pic_17.jpg"), id: 17 },
         { url: require("../assets/pic_18.jpg"), id: 18 },
         { url: require("../assets/pic_19.jpg"), id: 19 },
         { url: require("../assets/pic_20.jpg"), id: 20 },
         { url: require("../assets/pic_21.jpg"), id: 21 },
         { url: require("../assets/pic_22.jpg"), id: 22 },
         { url: require("../assets/pic_23.jpg"), id: 23 },
         { url: require("../assets/pic_24.jpg"), id: 24 },
         { url: require("../assets/pic_25.jpg"), id: 25 },
         { url: require("../assets/pic_26.jpg"), id: 26 },
         { url: require("../assets/pic_27.jpg"), id: 27 },
         { url: require("../assets/pic_28.jpg"), id: 28 },
         { url: require("../assets/pic_29.jpg"), id: 29 },
         { url: require("../assets/pic_30.jpg"), id: 30 },
         { url: require("../assets/pic_31.jpg"), id: 31 },
         { url: require("../assets/pic_32.jpg"), id: 32 },
         { url: require("../assets/pic_33.jpg"), id: 33 },
         { url: require("../assets/pic_34.jpg"), id: 34 },
         { url: require("../assets/pic_35.jpg"), id: 35 },
         { url: require("../assets/pic_36.jpg"), id: 36 },
         { url: require("../assets/pic_37.jpg"), id: 37 },
         { url: require("../assets/pic_38.jpg"), id: 38 },
         { url: require("../assets/pic_39.jpg"), id: 39 },
         { url: require("../assets/pic_40.jpg"), id: 40 },
         { url: require("../assets/pic_41.jpg"), id: 41 },
         { url: require("../assets/pic_42.jpg"), id: 42 },
         { url: require("../assets/pic_43.jpg"), id: 43 },
         { url: require("../assets/pic_44.jpg"), id: 44 },
         { url: require("../assets/pic_45.jpg"), id: 45 },
         { url: require("../assets/pic_46.jpg"), id: 46 },
         { url: require("../assets/pic_47.jpg"), id: 47 },
         
       ],
     };
   }

   loadMore = () => {
      var ImageCount = this.state.loadImageCount + 12;
      this.setState({ loadImageCount: ImageCount });
   }

  static navigationOptions = () => {
      return {
        header: (null),
      };
      
    }
  renderFooter = () => {
    if(this.state.loadImageCount < this.state.images.length){
      return (
        <View style={styles.buttonRow}>
          <Icon.Button
            name="sort"
            backgroundColor="#ffa500"
            onPress={() => {this.loadMore()}}
          >
            <Text style={{ fontSize: 15 }}>View More</Text>
          </Icon.Button>
        </View>
      );
    }
    else{
      return (
        null
      )
    }
  }
  render(){
  return (
    <View >
      <View style={{width:"100%",height:undefined,paddingTop:StatusBar.currentHeight}}>
        <Header />
      </View>
      <View style={styles.outerContainer}>
        <FlatList
          data={this.state.images.slice(0, this.state.loadImageCount)}
          key={"2"}
          numColumns={2}
          contentContainerStyle={styles.homescreen}
          keyExtractor={(item) => item.id.toString()}
          ListFooterComponent={this.renderFooter}
          renderItem={({ item }) => (
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={() =>
                this.props.navigation.navigate("Image Details", {
                  SelectedImage: [item],
                })
              }
            >
              <Image
                source={item.url}
                style={{
                  width: Dimensions.get("window").width * 0.45,
                  height: Dimensions.get("window").width * 0.55,
                  borderWidth: 2,
                  borderColor: "white",
                  resizeMode: "cover",
                  marginVertical: Dimensions.get("window").width * 0.02,
                  marginHorizontal: Dimensions.get("window").width * 0.02,
                }}
              />
            </TouchableOpacity>
          )}
        />
      </View>
    </View>
  );};
}

const styles = StyleSheet.create({
  homescreen: {
    width: Dimensions.get("window").width,
    alignItems: "center",
    justifyContent: "center",
    height: undefined,
    paddingBottom: Dimensions.get("window").height * 0.1,
    backgroundColor: 'white'
  },
  outerContainer: {
    position: "relative",
    marginTop: Dimensions.get("window").height * 0.05,
  },
  buttonRow: {
    margin: 15,
    flexDirection: "row",
    alignContent: "center",
    alignSelf: "center",
    justifyContent: "center",
  },
});

这是点击图片时页面的代码：

import React, { Component, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  Dimensions
} from 'react-native';

import { NavigationStackProp } from "react-navigation-stack";
import Header from '../components/Header';
import BackHeader from '../components/BackHeader';


var count = 0;
interface Props{
    navigation: NavigationStackProp
}
interface State{
    images: any
}
export default class ImageDetails extends Component<Props,State> {
  constructor(props) {
    super(props);
    this.state = {
        images: this.props.navigation.getParam("SelectedImage")
    };
  }
  
  render ()  {
    return (
      <View>
      <View style={{width:"100%",height:undefined}}> //,paddingTop:StatusBar.currentHeight
        <BackHeader />
        </View>
      <FlatList
        data={this.state.images}
        numColumns={1}
        contentContainerStyle={styles.homescreen}
        keyExtractor={(item) => item.id.toString()}
        renderItem={(item) => this.loadImage(item)}
      />
      </View>
    );
  }
  loadImage = (item) => {
    return (
      <View style={styles.homescreen}>
        <Image
          source={item.item.url}
          style={{
            width: Dimensions.get("window").width * 0.99,
            height: Dimensions.get("window").height * 0.73,
            borderWidth: 2,
            borderColor: "white",
            resizeMode: "cover",
            marginVertical: Dimensions.get("window").width * 0.02,
            marginHorizontal: Dimensions.get("window").width * 0.02,
          }}
        />
        <Text>Miniature Description</Text>
      </View>
    );
  };
}
const styles = StyleSheet.create({
  homescreen: {
    position: "relative",
    width: Dimensions.get("window").width,
    alignItems: "center",
    alignSelf: 'center',
    justifyContent: "center",
  },
});

【问题讨论】：

您没有提供我们可以使用的代码。如果您想要一个有意义的答案，或者根本没有答案，请提供您的代码。
@TalmacelMarianSilviu 感谢您考虑并抱歉没有发布代码。我认为这可以在不看代码的情况下解决。现在你有了所有的代码。

标签： javascript arrays react-native react-native-android

【解决方案1】：

所以我在 Discord 上的 Expo Community 中找到了这个答案。要创建数组，您可以在项目的主文件中创建它，或者更好的方法是创建一个额外的文件并将数组文件添加到其中，然后在主文件中调用它。例如，这是我的代码中用于创建数组的额外文件。

  image1: {
    title: "Cool Image # 1",
    description: `People setting in a garden`,
  },
  image2: {
    title: "Cool Image # 1",
    description: `People setting in a garden`,
  },
  image3: {
    title: "Cool Image # 1",
    description: `People setting in a garden`,
  },
  image4: {
    title: "Cool Image # 1",
    description: `People setting in a garden`,
  },
  image5: {
    title: "Cool Image # 1",
    description: `People setting in a garden`,
  },
};

这是我调用数组的主文件。

  constructor(props) {
    super(props);
    this.state = {
      loadImageCount: 6,
      images: [
        {
          url: require("../assets/pic_1.jpg"),
          id: 1,
          title: ImageData["image1"].title,
          description: ImageData["image1"].description,
        },
        {
          url: require("../assets/pic_2.jpg"),
          id: 2,
          title: "cool image #2",
          description: "Some people sitting in a garden",
        },

【讨论】：