Javascript 如何创建包含图像标题和描述的文本数组？_Javascript_Arrays_React Native_React Native Android

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

javascript arrays react-native

Javascript 如何创建包含图像标题和描述的文本数组？,javascript,arrays,react-native,react-native-android,Javascript,Arrays,React Native,React Native Android,我在我的应用程序中添加了一些从数组调用的图片。现在我需要另一个数组来包含文本，其中包括这些图像的标题和一些描述。如何创建此文本数组，以便在单击图像时显示该图像的特定标题和说明这是在应用程序主屏幕上显示图片的代码 import { StatusBar } from "expo-status-bar"; import Icon from "react-native-vector-icons/FontAwesome"; import { StyleSh

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

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

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",
  },
});

从“世博会状态栏”导入{StatusBar}；
从“react native vector icons/Fontsome”导入图标；
进口{
样式表，
文本，
看法
形象,，
平面列表，
尺寸，
可触摸不透明度，
}从“反应本族语”；
从“../components/Header”导入标题；
var loadImageCount=6；
导出默认类PicFlatlist扩展组件{
建造师（道具）{
超级（道具）；
此.state={
loadImageCount:6，
图像：[
{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}，
],
};
}
加载更多=（）=>{
var ImageCount=this.state.loadImageCount+12；
this.setState（{loadImageCount:ImageCount}）；
}
静态导航选项=（）=>{
返回{
标题：（空），
};
}
renderFooter=（）=>{
if（this.state.loadImageCount
查看更多
);
}
否则{
返回(
无效的
)
}
}
render（）{
返回(
item.id.toString（）}
ListFooterComponent={this.renderFooter}
renderItem={（{item}）=>(
this.props.navigation.navigate（“图像详细信息”{
选择图像：[项目]，
})
}
>
)}
/>
);};
}
const styles=StyleSheet.create({
主屏幕：{
宽度：尺寸。获取（“窗口”）。宽度，
对齐项目：“中心”，
辩护内容：“中心”，
高度：未定义，
填充底部：尺寸。获取（“窗口”）。高度*0.1，
背景颜色：“白色”
},
外部容器：{
职位：“相对”，
边缘顶部：尺寸。获取（“窗口”）。高度*0.05，
},
按钮箭头：{
差额：15，
flexDirection:“行”，
内容：“中心”，
对准自己：“居中”，
辩护内容：“中心”，
},
});

这是单击图像时页面的代码：

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",
  },
});

import React，{Component，useState}来自'React'；
进口{
样式表，
文本，
看法
形象,，
平面列表，
尺寸
}从“反应本机”；
从“反应导航堆栈”导入{NavigationStackProp}；
从“../components/Header”导入标题；
从“../components/BackHeader”导入BackHeader；
var计数=0；
界面道具{
导航：NavigationStackProp
}
界面状态{
图片：有吗
}
导出默认类ImageDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图像：this.props.navigation.getParam（“SelecteImage”）
};
}
渲染（）{
返回(
//，paddingTop:StatusBar.currentHeight
item.id.toString（）}
renderItem={（项）=>this.loadImage（项）}
  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",
        },