当图像位于数组中时，如何添加显示在图像下方的文本？ （React Native）（零食博览会）

Question

我有一组图像，我想在按下按钮时在屏幕上随机显示图像，但我还想在图像下方显示文本。我希望每张图像下面都有其各自的文本。我拥有的完整图像数组由 200 多张图像组成。

这是我的代码的示例：（粗体斜体部分是我认为问题所在的地方）

import React, { useState, useEffect } from 'react';
import { Text, SafeAreaView, StyleSheet, ScrollView, Pressable, View, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

**//images
const images2 = [
  require('./Characters/image1.jpg'),
  require('./Characters/image2.webp'),
  require('./Characters/image3.webp'),
];**

const stylesIQ = StyleSheet.create({
    BLKButton:
    style={
      backgroundColor: 'black',
      width: 300,
      height: 50,
      borderRadius: 10,
      padding: 10,
      justifyContent: 'center',
      alignSelf: 'center',
      marginTop: 15,
    },
    BGColor:
    style={
      flex: 1,
      backgroundColor: '#0096FF',
    },
    Image:{
      height: 400,
      width: 300,
      marginTop: 10,
      marginBottom: 20,
      alignSelf: 'center',
      resizeMode: 'contain'
    },
  });

//IQScreen functionality
const IQScreen = () => {
  const navigation = useNavigation();

  const [randomImage, setRandomImage] = useState(null);
const [imageGenerated, setImageGenerated] = useState(false);

const generateRandomImage = () => {
  if (!imageGenerated) {
    const randomIndex = Math.floor(Math.random() * images2.length);
    setRandomImage(images2[randomIndex]);
    setImageGenerated(true);
  }
};

//Screen Setup
return (
  <View  style={[stylesIQ.BGColor]}>
    <Text style={{ fontSize: 35, marginTop: 10,  alignSelf: 'center'}}>Intelligence</Text>
    <Image
      source={randomImage}
      style={stylesIQ.Image}
    />
    <View style={[stylesIQ.BLKButton]}>
    <Pressable style={stylesIQ.BLKButton} onPress={generateRandomImage}>
      <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
          Choose Your Intellect
      </Text>
      </Pressable>
    </View>
    <View style={[stylesIQ.BLKButton]}>
    <Pressable style={stylesIQ.BLKButton} onPress={() => navigation.navigate('Strength')}>
      <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
          Next Trait: Strength
      </Text>
      </Pressable>
    </View>
  </View>
  );
}

export default IQScreen;

我尝试制作 URI 键，但仍然不起作用

const character1 = require('./Characters/image1.jpg');
const character2 = require('./Characters/image2.webp');
const character3 = require('./Characters/image3.webp');

// Refactored images array
const images2 = [
  { uri: character1, text: 'Character 1' },
  { uri: character2, text: 'Character 2' },
  { uri: character3, text: 'Character 3' },
];

我也尝试过这种方法：

   {uri: require('./Characters/image1.jpg'), name = 'Character1'}

Answer 1

我创建了一个示例：

import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, Pressable, View, Image } from 'react-native';

const images2 = [
  require('./assets/elon.jpeg'),
  require('./assets/bill.jpeg'),
  require('./assets/mark.jpeg'),
];

const stylesIQ = StyleSheet.create({
  BLKButton: (style = {
    backgroundColor: 'black',
    width: 300,
    height: 50,
    borderRadius: 10,
    padding: 10,
    justifyContent: 'center',
    alignSelf: 'center',
    marginTop: 15,
  }),
  BGColor: (style = {
    flex: 1,
    backgroundColor: '#0096FF',
  }),
  Image: {
    height: 400,
    width: 300,
    marginTop: 10,
    marginBottom: 20,
    alignSelf: 'center',
    resizeMode: 'contain',
  },
});

//IQScreen functionality
const IQScreen = () => {
  const [randomImage, setRandomImage] = useState(null);
  const [imageGenerated, setImageGenerated] = useState(false);

  const generateRandomImage = () => {
    const randomIndex = Math.floor(Math.random() * images2.length);
    setRandomImage(images2[randomIndex]);
  };

  //Screen Setup
  return (
    <View style={[stylesIQ.BGColor]}>
      <Text style={{ fontSize: 35, marginTop: 10, alignSelf: 'center' }}>
        Intelligence
      </Text>
      <Image source={randomImage} style={stylesIQ.Image} />
      <View style={[stylesIQ.BLKButton]}>
        <Pressable style={stylesIQ.BLKButton} onPress={generateRandomImage}>
          <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
            Choose Your Intellect
          </Text>
        </Pressable>
      </View>
      <View style={[stylesIQ.BLKButton]}>
        <Pressable style={stylesIQ.BLKButton}>
          <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
            Next Trait: Strength
          </Text>
        </Pressable>
      </View>
    </View>
  );
};

export default IQScreen;