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

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

使文字出现在图像下方。把flex和flexDirection:Column送到包裹图像和文本的View。

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

Answer 2

您应该创建父视图flexDirection：行和子视图列（默认情况下）。

here is the output that you want

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

Answer 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>
  )
 }
}