Как добавить текст под каждым моим изображением подряд

Question

Я пытаюсь получить описание товара для каждой обуви подряд.Как бы я поступил так?Обычно, когда я добавляю текст, он идет справа от ботинка, а не под ним.

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;

Answer 1

Вы должны сделать родительский вид flexDirection: столбец строк и дочерних представлений (по умолчанию).

вот вывод, который вы хотите

Кодэтот вывод вы можете использовать свой массив и изображение вместо дочернего представления

Answer 2

Вы можете создать компонент для одного продукта с изображением и текстом и импортировать их для рендеринга.Вы можете использовать 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>
  )
 }
}

Answer 3

Чтобы ваш текст присутствовал под вашим изображением.присвойте flex и flexDirection:Column View, который охватывает как изображение, так и текст.

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