【问题标题】:React Native - SectionList numColumns supportReact Native - SectionList numColumns 支持
【发布时间】:2017-12-15 13:41:26
【问题描述】:

FlatList 支持numColumns。如何设置numColumnsSectionList

Github 问题:SectionList renderItem multi item support #13192

【问题讨论】:

  • 从 Github 问题上看,这个问题已经关闭并已经解决了......那你为什么要在这里发布这个?
  • 我认为这个问题没有得到妥善解决,我也在那里发布了我的答案。
  • 如果您只需要 2 或 3 个部分,您可以为每个部分添加一个 FlatList。

标签: react-native react-native-flatlist


【解决方案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}
      />
    );
  }
}

【讨论】:

  • 最佳答案
  • 嗨,新朋友,你能告诉我'dumyData'变量的样子吗? @pir-shukarullah-shah
  • @iDevAmit 它的格式应该与普通 SectionList 相同...类似于本示例中的“DATA”数组snack.expo.io/…
  • 此解决方案在加载图像时提供了延迟体验
【解决方案2】:

挖掘这个问题后,我提出了一个类似于 Pir Shukarullah Shah 的解决方案。

我使用 FlatList 而不是我的常规项目,仅考虑 &lt;SectionList/&gt;'s renderItem 方法中的第一项。

 _renderList = ({ section, index }) => {
    if (index !== 0) return null;

    return (
      <FlatList numColumns={columns}
        columnWrapperStyle={styles.container}
        data={section.data}
        renderItem={this._renderItem}
        keyExtractor={keyExtractor}
      />
    )
  }



...
      <SectionList
        renderItem={this._renderList}
        renderSectionHeader={this._renderSectionHeader}
        sections={itemList}
        keyExtractor={keyExtractor}
      />

【讨论】:

    【解决方案3】:

    可以使用带有 numColumns 属性的 FlatList 作为 SectionList 的 renderItem。

    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}
            />
        )
    }
    

    【讨论】:

    • 是的,这是可能的,但为什么您需要 FlastList 只购买 3 件商品?
    • @PirShukarullahShah 我发布的代码只是使用 FlatList 显示 3 列(不是 3 项)的示例,每个列表中有一些项目。选择您自己的 numColums、您自己的项目数、您自己的部分数。据我所知,没有限制,但使用 removeClippedSubviews 来提高性能。
    • 确实不推荐这样做,因为在 FlatList 中只有一些(可能是 100 个)项目时,您的性能会变得很差。
    • FlatLists 对于 1000 个项目对我来说表现良好。没有尝试过更多。正确使用 shouldcomponentupdate 和 removeClippedSubviews 后,列表越大,性能似乎也不会下降。
    【解决方案4】:

    我发现有一个简单的解决方案。请尝试将以下属性添加到

    contentContainerStyle={{
        flexDirection  : 'row',
        justifyContent : 'flex-start',
        alignItems     : 'flex-start',
        flexWrap       : 'wrap'
    }}
    

    此外,设置和呈现宽度等于 SectionList 宽度的 Section Header。否则,列表项将在行方向的Section Header之后显示。

    【讨论】:

    • 被低估的答案!
    【解决方案5】:
     const DATA = [
         {
          renderItem: ({ item, index }) => {
              return (<View style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', }}>
              {item.map((elem,index)=>(<View style={{  borderColor: 'black', borderWidth: 2, minWidth:100 }}>
                <Text>{elem.value}</Text>
              </View>))
              }
              </View>);
           },
          data: [
            [{id:'1', value:'Pizza'}, {id:'2', value:'Burger'}, {id:'3', value:'Onion Rings'}], //this array length will be noOfColumns
            [{id:'4', value:'Risotto'}, {id:'5', value:'French Fries'}, {id:'6', value:'Water'}],
          ],
         },
    
    
       <SectionList
          ref={listRef}
          sections={DATA}
          keyExtractor={_keyExtractor}
        />
    

    【讨论】:

      猜你喜欢
      • 2017-11-12
      • 1970-01-01
      • 1970-01-01
      • 2022-01-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-13
      相关资源
      最近更新 更多