Question

我如何在2个列中显示图像？现在我有4张图片显示为垂直，用户可以单击并用关闭窗口（x）按钮弹出。此页面也无法滚动。 请有人帮忙显示图片

我想要这样

图片1图片2

图片3图片4

 import React, { Component } from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.main}>
       {"\n"}{"\n"}<Text style={{fontWeight: "bold"}}>Promotions Coupons</Text>{"\n"}{"\n"}{"\n"}{"\n"}{"\n"}{"\n"}
        <Image
          style={styles.image}
          style={{width: 100, height: 100}}
          source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}

        >
        </Image>

         <Image
          style={styles.image}
          style={{width: 100, height: 100}}
          source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}

        >
        </Image>
        <Image
          style={styles.image}
          style={{width: 100, height: 100}}
          source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}

        >
        </Image>



          <Text>
          <Text>{ this.addPadding() }</Text>

    <Text>
  <Text style={{fontWeight: "bold"}}></Text>{"\n"}

</Text>      




        </Text>
      </View>
    );
  }

  addPadding() {
    const padding = Array.apply(null, Array(16)).map(() => '').join('');
    return Array.apply(null, Array(8)).map(() => padding + '\n');
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    margin: 40,
  },

  image: {
    width: 600,
    height: 110,
    position: 'absolute',
  },
});

Answer 1

一种解决方案是将主视图分为两个子View（子），每个子View将具有2-2个图像。在子视图中将flexDirection分配为行，以使这两个图像沿主轴按行呈现。

import React, { Component } from 'react';
import { 
  Image, 
  Text, 
  View, 
  StyleSheet,
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.main}>
        <Text style={{fontWeight: "bold",alignSelf:'center', marginBottom:20}}>Promotions Coupons</Text>
        <View style={{flexDirection:'row', margin:20, justifyContent:"space-between"}}>
          <Image
            style={{width: 100, height: 100, }}
            source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}/>
          <Image
            style={{width: 100, height: 100}}
            source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}/>
        </View>
        <View style={{flexDirection:'row', margin:20, justifyContent:"space-between"}}>
          <Image
            style={{width: 100, height: 100}}
            source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}
          />
          <Image
          style={{width: 100, height: 100}}
          source={{ uri: 'https://cdn.shopify.com/s/files/1/0127/0982/files/SFS1703E-In-Store-Christmas-Coupon_grande.jpg?v=1509547438' }}
        />
        </View>
        <Text>
          <Text>{ this.addPadding() }</Text>
          <Text>
             <Text style={{fontWeight: "bold"}}></Text>{"\n"}
          </Text>      
        </Text>
      </View>
    );
  }

addPadding() {
    const padding = Array.apply(null, Array(16)).map(() => '').join('');
    return Array.apply(null, Array(8)).map(() => padding + '\n');
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    margin: 40,
  },

  image: {
    width: 600,
    height: 110,
    position: 'absolute',
  },
});

如何在2列的React Native中显示图像？

1 个答案: