ReactNative 佈局篇

三列布局篇

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


const styles = StyleSheet.create({
    listmodcontent: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 20,
    paddingBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
    justifyContent: 'space-between',
  },
  listItem: {
    marginBottom: 10,
    borderRadius: 5,
  },
})

export default class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      movieData: [
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
        {
          images: 'http://img1.doubanio.com/view/photo/s_ratio_poster/public/p2543163892.jpg',
        },
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
        {
          images: 'http://img1.doubanio.com/view/photo/s_ratio_poster/public/p2543163892.jpg',
        },
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
        {
          images: 'http://img1.doubanio.com/view/photo/s_ratio_poster/public/p2543163892.jpg',
        },
      ],
    }
  }

  render() {
    const { movieData } = this.state
    return (
      <View style={styles.viewpager}>
          <View style={styles.listmodcontent}>
            { movieData.map((value, keys) => {
              return (
                <View style={styles.listItem} key={keys}>
                  <Image
                    style={{ width: 105, height: 150, borderRadius: 5 }}
                    source={{ uri: value.images }}
                  />
                </View>
              )
            })}
          </View>
      </View>
    )
  }
}

 

三列布局通用版,商品總數爲奇數，偶數都可以，動態計算寬度；

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

/**
 *
 * @param {*} gap // 減去的寬度 可以有補白paadding + 圖片padding
 * @param {*} count // 列數
 * @param {*} proportion // 比列默認爲1:1 長方形推薦1:1.5
 */
const calcRectSize = (gap, count, proportion = 1) => {
  const { width } = Dimensions.get('window')
  // TODO 這裏爲了兼容iosplus 所以多加1
  const w = (width - (gap + 1)) / count
  return { 
    width: w,
    height: w * proportion,
    contentWidth: (width - gap),
    clientWidth: width
  }
}
//佈局樣式
const styles = StyleSheet.create({
    listmodcontent: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 20,
    paddingBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  listItem: {
    marginBottom: 10,
    marginRight: 10,
    width: calcRectSizeWidth.width,
  },
  listImage: {
    width: calcRectSizeWidth.width,
    height: calcRectSize(ViewWidth, 3, 1.5).height,
    borderRadius: 5,
  },
})

export default class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      movieData: [
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
        {
          images: 'http://img1.doubanio.com/view/photo/s_ratio_poster/public/p2543163892.jpg',
        },
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
        {
          images: 'http://img1.doubanio.com/view/photo/s_ratio_poster/public/p2543163892.jpg',
        },
        {
          images: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.jpg',
        },
      ],
    }
  }

  render() {
    const { movieData } = this.state
    return (
          <View style={styles.listmodcontent}>
            { movieData.map((value, keys) => {
              const newstyles = (keys + 1) % 3 === 0 ? { marginRight: 0 } : null
              return (
                <View style={[styles.listItem, newstyles]} key={keys}>
                  <Image
                    style={styles.listImage}
                    source={{ uri: value.images }}
                  />
                </View>
              )
            })}
          </View>
    )
  }
}