如何在我的每个图像下连续添加文本答案

【问题标题】：How to add Text under each of my images in a row如何在我的每个图像下连续添加文本
【发布时间】：2023-03-05 19:18:01
【问题描述】：

我正在尝试为每双鞋连续添加产品描述。我该怎么做呢？通常，当我添加文本时，它会位于鞋子的右侧而不是下方。

Tournaments.js

    import React from 'react';
import { View, Text, Image, ScrollView } from 'react-native';
import { Card, Button, Spinner, CardSection, } from '../common';

class Tournaments extends React.Component {
 static navigationOptions= {
   tabBarLabel: 'Tournaments'
 }
   render() {
     return (

     <View style={styles.containerStyle}>
       <Card>
       <View style={styles.logoContainer}>
       <Image
         style={styles.logo}
         source={require('../../Images/ShoeJackCityLogo.png')}
       >
       </Image>
       </View>
       <View style={styles.formContainer} />
       </Card>
       <ScrollView>
       <ScrollView horizontal>
       <Card>
        <View style={{ flex: 1, flexDirection: 'row' }}>
        <Image
          style={styles.product}
          source={require('../../Images/aj_4_toro.png')}
        />
        <Text style={styles.productDescription}>
         Air Jordan 4 Retro Toro Bravo
       </Text>

        <Image
          style={styles.product}
          source={require('../../Images/aj_4_toro.png')}
        />
      <Image
          style={styles.product}
          source={require('../../Images/aj_4_toro.png')}
      />
      </View>
      </Card>
     </ScrollView>

     <ScrollView horizontal>
      <Card>
      <View style={{ flex: 1, flexDirection: 'row' }}>
      <Image
        style={styles.product}
        source={require('../../Images/aj_4_toro.png')}
      />
      <Image
        style={styles.product}
        source={require('../../Images/aj_4_toro.png')}
      />
      <Image
        style={styles.product}
        source={require('../../Images/aj_4_toro.png')}
      />
    </View>
   </Card>
   </ScrollView>
   </ScrollView>
     </View>

   );
     }
   }
   const styles = {
 containerStyle: {
   flex: 1,
   backgroundColor: '#F13C20',
   paddingBottom: 20
 },
 logoContainer: {
     alignItems: 'center',
     flexGrow: 1,
     justifyContent: 'flex-start',
     paddingBottom: 15
 },
 logo: {
   paddingTop: 15,
   width: 50,
   height: 50,
 },
 product: {
   width: 100,
   height: 100,
   paddingBottom: 5,
   marginRight: 50
 },
 productDescription: {
   fontsize: 12,
   textAlign: 'center',
   fontStyle: 'italic',
   color: 'black'

 }
};
export default Tournaments;

【问题讨论】：

尝试在<View style={{ flex: 1, flexDirection: 'row' }}>中使用alignItems: 'center'或justifyContent: 'center'
您是否尝试制作网格视图布局？

标签： css reactjs react-native mobile

【解决方案1】：

使您的文字出现在您的图片下方。将flex 和flexDirection:Column 分配给包含图像和文本的View。

<View style={{flex:1, flexDirection:'column'}}>
 <Image .... />
  <Text>text here</Text>
 </View>

【讨论】：

【解决方案2】：

您应该使父视图 flexDirection: 行和子视图列（默认情况下）。

here is the output that you want

Code of that output you can use your array and image instead of child view

【讨论】：

我相信通常建议在答案中嵌入代码，而不是链接到外部站点。在这种情况下，链接的代码也是一张图片......

【解决方案3】：

您可以为具有图像和文本的单个产品创建一个组件，然后将它们导入以进行渲染。您可以使用 FlexBox 设计任何类型的布局。通过链接https://facebook.github.io/react-native/docs/flexbox

ProductCard.js

export default class ProductCard extends Component{
 constructor(props){
    super(props);
    this.state = {}
 }
 render(){
  return(
   <View style ={{flex:1, flexDirection:"column"}}>
     <View>
      <Image source = {this.props.imageURL} />  
     </View>
     <View>
      <Text>{this.props.imageText}</Text>
     </View>
   </View>
  )
 }
}

您可以将图像 url 和图像文本作为道具发送到 ProductCard 组件。并添加尽可能多的 ProductCard。稍后您可以将产品的响应发送到 ProductCard 组件并使用 FlatList 来呈现所有产品。

ProductComponent.js

import ProductCard from "./ProductCard"
export default class ProductComponent extends Component{
 constructor(props){
    super(props);
    this.state = {}
 }
 render(){
  return(
   <View style ={{flex:1}}>
    <ProductCard imageURL = "URL OF IMAGE" imageText = "TEXT OF IMAGE" />
    <ProductCard imageURL = "URL OF IMAGE" imageText = "TEXT OF IMAGE" />
   </View>
  )
 }
}

【讨论】：