React Nativemake映像布局

wwodge7n 于 2023-02-13 发布在 React

关注(0)|答案(2)|浏览(85)

如果我想做一个布局这种体裁你会怎么做！？

我试过平面列表
numColumns={3}
columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between' }}
但最后两个总是一个在右边，一个在左边...列表可以根据情况以1项，2项或3项结束。

import React from 'react'
import {FlatList, View} from 'react-native'

const Item = () =>{

  return <View style={{flex:1, width:50, height:50, backgroundColor:'white'}}/>
}

const exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]

  return 
    <View style={{flex:1}}>
      <FlatList 
        data={array}
        renderItem={({ item, index }) => {
          return (
            <Item />
          )
        }}
        numColumns={3}
        columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between'}}
      />
    </View>
}

//result:
/*
O O O
O O O
O   O

and i want:
O O O
O O O
O O
-- or --
O O O
O O O
O 
-- or --
O O O
O O O
O O O
*/

react-native

来源：https://stackoverflow.com/questions/75426658/react-native-make-image-layout

2条答案

按热度按时间

62lalag41#

试试这个代码

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

const Item = () =>{

  return <View style={{width:"27%", height:50, backgroundColor:'white',margin:"3%"}}/>
}

export default exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]

  return (
    <View style={{flex:1,backgroundColor:"black"}}>
      <FlatList 
        data={array} numColumns={3} 
renderItem={({ item }) => (
<Item/> )}
            />
    </View>
    )
}

赞(0）回复(0）举报 2023-02-13

ilmyapht2#

这帮助我，但我需要一些修改...

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

const Item = (props) =>{
  const {itemCount} = props

  return <View style={{flex:1, width:"30%", height:50, backgroundColor:'white', marginRight: itemCount<=2 ? "5%" : 0}}>
  
  </View>
}

export default exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]
  let itemCount=0
  
  return (
    <View style={{flex:1,backgroundColor:"black"}}>
      <FlatList 
        data={array} numColumns={3} 
        renderItem={({ item }) => {
          if(itemCount===3) itemCount=0
          itemCount++
          
          return <Item itemCount={itemCount}/> 
        }}
        columnWrapperStyle={{ flex: 1 / 3, flexWrap: 'wrap' }}
            />
    </View>
    )
}

/*
this return this:
O O O
O O O
O O O

O O O
O O O
O O

O O O
O O O
O
*/

谢谢你的帮助！如果有其他的解决办法，我请你把他们放在这里，以帮助更多的人喜欢你帮助我！

赞(0）回复(0）举报 2023-02-13

我来回答

React Nativemake映像布局

2条答案

相关问题

热门标签

最新问答