React Native - SectionList numColumns support

Question

FlatList은 numColumns입니다. 을 SectionList으로 설정하는 방법은 무엇입니까?

Github의 문제 : SectionList renderItem multi item support #13192

Answer 1

여기 SectionList에 대한 numColumns 내 솔루션입니다. 네가 더 잘 알고 있다면 알려줘.

class Example extends Component { 
    static propTypes = { 
    numColumns: PropTypes.number 
    }; 

    static defaultProps = { 
    numColumns: 2 
    }; 

    _renderSection = data => <Section {...data} />; 

    _renderItem = ({ section, index }) => { 
    const { numColumns } = this.props; 

    if (index % numColumns !== 0) return null; 

    const items = []; 

    for (let i = index; i < index + numColumns; i++) { 
     if (i >= section.data.length) { 
     break; 
     } 

     items.push(<Item item={section.data[i]} />); 
    } 

    return (
     <View 
     style={{ 
      flexDirection: "row", 
      justifyContent: "space-between" 
     }} 
     > 
     {items} 
     </View> 
    ); 
    }; 

    render() { 
    return (
     <SectionList 
     sections={dumyData} 
     style={styles.container} 
     renderItem={this._renderItem} 
     renderSectionHeader={this._renderSection} 
     /> 
    ); 
    } 
} 

Answer 2

SectionList의 renderItem으로 numColumns prop가있는 FlatList를 사용할 수 있습니다.

const data = [ //Notice [[...]] instead of [...] as in the RN docs 
    {data: [[...]], title: ...}, 
    {data: [[...]], title: ...}, 
    {data: [[...]], title: ...}, 
] 

render() { 
    return (
     <SectionList 
      renderItem={this._renderSectionListItem} 
      renderSectionHeader={this._renderSectionHeader} 
      sections={data} 
     /> 
    ) 
} 

renderSectionListItem = ({item}) => { 
    return (
     <FlatList 
      data={item} 
      numColumns={3} 
      renderItem={this.renderItem} 
     /> 
    ) 
}