열, 마지막 항목 너비로 네이티브 FlatList 반응

열, 마지막 항목 너비로 네이티브 FlatList 반응

---

FlatList를 사용하여 두 열에 항목 목록을 표시하고 있습니다.

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

카드 구성 요소는 몇 가지 스타일이있는보기입니다.

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

잘 작동하지만 항목 수가 홀수이면 마지막 행에 항목이 하나만 포함되고 해당 항목이 화면의 전체 너비로 늘어납니다.

항목을 다른 항목과 동일한 너비로 설정하려면 어떻게해야합니까?

---

여기에서 시도 할 수있는 몇 가지가 있습니다.

A) 카드에 대해 미리 정의 된 너비 설정 (설정 한 높이와 같습니까?). 그런 다음 alignItems카드를 가운데 또는 왼쪽에 배치하기 위해 사용할 수 있습니다. 여기서 원하는 것이 무엇인지 확실하지 않습니다.

B) 카드 수가 짝수 인 경우이 공간을 채우기 위해 끝에 빈보기를 추가 할 수 있습니다. 이 방법은 꽤 어색하지만 미래의 요소를위한 공간을 남겨 두려고 할 때 유용합니다.

C) Simply use alignItems: 'space-between, i like to use this to center items, but you would have to define the width, or use something like flex:0.5

I suggest researching more into flexbox to help you with this, as it is hard to tell the context of this situation. I'm assuming the above methods will help, but if not, here are some links for you to look at -

First link

Second link

Third link _{Link Broken}

Hope this helps. If you need any further clarification - just ask

---

for your case use flex: 1/2

therefore: Your item should have flex of 1/(number of columns) if you have 3 columns your item should have flex:1/3

---

Dimensions를 통해 장치의 현재 너비를 가져오고 렌더링하려는 열 수에 따라 몇 가지 수학을 수행하고 여백을 빼고이를 minWidth 및 maxWidth로 설정할 수 있습니다.

예를 들면 :

const {height, width} = Dimensions.get('window');
const itemWidth = (width - 15) / 2;

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>

---

이것은 FlatList열과 균등 한 간격 으로 스타일을 지정하는 가장 깨끗한 방법입니다 .

    <FlatList style={{margin:5}}
        numColumns={2}                  // set number of columns 
        columnWrapperStyle={style.row}  // space them out evenly

        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });

---

그 이유는 카드에 스타일 flex: 1이 있기 때문에 남은 공간을 모두 확장하려고합니다. maxWidth: '50%'카드 스타일 에 추가 하여 수정할 수 있습니다.

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>

---

항목 수가 홀수인지 확인하고, 홀수이면 마지막 항목에 특별한 스타일을 부여합니다. 예)

 {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:'48%'
}
v2:{
}

참조 URL : https://stackoverflow.com/questions/43502954/react-native-flatlist-with-columns-last-item-width