Ios 如何在某些数据部分之后将分隔符添加到平面列表中？

渲染一些数据后，如何在React Native FlatList中添加分隔符

我尝试使用React Native SectionList，但无法像在FlatList中那样添加fetchNext函数

这是我当前的代码

<FlatList
  data={data}
  keyExtractor={keyExtractor}
  renderItem={renderItem}
  fetchNext={fetchNextPage}
  numColumns={2}
  ItemSeparatorComponent={<View style={this.separatorStyles} />}
  ListFooterComponent={isFetching && <LoaderView notExpand />}
/>

|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|
------------- (need add some separator)
|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|
-------------（需要添加一些分隔符）
|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|

您可以通过修改数据和创建更高级的renderItem功能轻松实现这一点。 首先，我们从修改数据开始。我使用了以下示例数据：

    data: [
        { id: '1'},{ id: '2'},{ id: '3'},{ id: '4'},{ id: '5'},{ id: '6'},{ id: '7'},{ id: '8'},{ id: '9'},{ id: '10'}
    ]

现在让我们修改它，请参见代码注释以获取解释：

modifyData(data){
    const numColumns = 2; // we want to have two columns
    const separator = 4;  // after 4 elements we want to have a separator 
    var tmp = []; // temporary array to store columns
    var newData = [];
    data.forEach((val, index) => {
      // check if column is full, if yes push it to the new array
      if (index % numColumns  == 0 && index != 0){
        newData.push(tmp);
        tmp = [];
      }
      // inject separator element if necessary, we mark them with id: -1
      if ( index % separator == 0 && index != 0){
        newData.push({ id: -1 })
      }
       tmp.push(val);
    }); 
    if (tmp.length > 0){
        // add remaining elements
        newData.push(tmp);
    }
   return newData;
  }
  render() {
    // modify your data, afterwards pass it to the FlatList 
    const newData = this.modifyData(this.state.data);
    return (
      <View style={styles.container}>
       <FlatList
        data={newData}
        renderItem={({item, index}) => this.renderItem(item, index)}
       />
      </View>
    );
  }

现在我们增强renderItem功能：

renderItem(item, index){
    // check if the current item is a separator
    if (item.id == -1){
      return (
        <View key={index} style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <Text> --------SEPERATOR -------- </Text>
        </View>
      )
    }
    // otherwise loop over array
    const columns = item.map((val, idx) => {
      return (
        <View style={{flex: 1, justifyContent: 'center'}} key={idx}>
          <Text style={{textAlign: 'center'}}> ID: {val.id} </Text>
        </View>
      )
    });
    return (
      <View key={index} style={{flexDirection: 'row', flex: 1}}>
        {columns}
      </View>
    )
  }

renderItem（项目，索引）{
//检查当前项目是否为分隔符
如果（item.id==-1）{
返回(
--------分离器--------
)
}
//否则，在阵列上循环
const columns=item.map（（val，idx）=>{
返回(
ID:{val.ID}
)
});
返回(
{columns}
)
}

输出：

工作示例：

---

您可以通过修改数据和创建更高级的renderItem功能轻松实现这一点。 首先，我们从修改数据开始。我使用了以下示例数据：

    data: [
        { id: '1'},{ id: '2'},{ id: '3'},{ id: '4'},{ id: '5'},{ id: '6'},{ id: '7'},{ id: '8'},{ id: '9'},{ id: '10'}
    ]

现在让我们修改它，请参见代码注释以获取解释：

modifyData(data){
    const numColumns = 2; // we want to have two columns
    const separator = 4;  // after 4 elements we want to have a separator 
    var tmp = []; // temporary array to store columns
    var newData = [];
    data.forEach((val, index) => {
      // check if column is full, if yes push it to the new array
      if (index % numColumns  == 0 && index != 0){
        newData.push(tmp);
        tmp = [];
      }
      // inject separator element if necessary, we mark them with id: -1
      if ( index % separator == 0 && index != 0){
        newData.push({ id: -1 })
      }
       tmp.push(val);
    }); 
    if (tmp.length > 0){
        // add remaining elements
        newData.push(tmp);
    }
   return newData;
  }
  render() {
    // modify your data, afterwards pass it to the FlatList 
    const newData = this.modifyData(this.state.data);
    return (
      <View style={styles.container}>
       <FlatList
        data={newData}
        renderItem={({item, index}) => this.renderItem(item, index)}
       />
      </View>
    );
  }

现在我们增强renderItem功能：

renderItem(item, index){
    // check if the current item is a separator
    if (item.id == -1){
      return (
        <View key={index} style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <Text> --------SEPERATOR -------- </Text>
        </View>
      )
    }
    // otherwise loop over array
    const columns = item.map((val, idx) => {
      return (
        <View style={{flex: 1, justifyContent: 'center'}} key={idx}>
          <Text style={{textAlign: 'center'}}> ID: {val.id} </Text>
        </View>
      )
    });
    return (
      <View key={index} style={{flexDirection: 'row', flex: 1}}>
        {columns}
      </View>
    )
  }

renderItem（项目，索引）{
//检查当前项目是否为分隔符
如果（item.id==-1）{
返回(
--------分离器--------
)
}
//否则，在阵列上循环
const columns=item.map（（val，idx）=>{
返回(
ID:{val.ID}
)
});
返回(
{columns}
)
}

输出：

工作示例：

---

出于文档目的，我将发布一个更详细的答案。以下是重要的代码：

const data = [{ id: 1 }, { id: 2 }, { separator: true, id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];

renderItem = ({ item }) => item.separator ? (
  <Text>-------- separator -------</Text>
) : (
  <Text>{`------${item.id}------`}</Text>
);

<FlatList
  renderItem={this.renderItem}
  data={data}
  numColumns={2}
/>

const data=[{id:1}，{id:2}，{separator:true，id:3}，{id:4}，{id:5}，{id:6}]；
renderItem=（{item}）=>item.separator？(
--------分离器-------
) : (
{`-${item.id}----------`}
);

---

请注意，如果分隔符采用全屏宽度，则项目4将在屏幕外呈现。例如，可以在分隔符之后渲染空视图

出于文档目的，我将发布一个更详细的答案。以下是重要的代码：

const data = [{ id: 1 }, { id: 2 }, { separator: true, id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];

renderItem = ({ item }) => item.separator ? (
  <Text>-------- separator -------</Text>
) : (
  <Text>{`------${item.id}------`}</Text>
);

<FlatList
  renderItem={this.renderItem}
  data={data}
  numColumns={2}
/>

const data=[{id:1}，{id:2}，{separator:true，id:3}，{id:4}，{id:5}，{id:6}]；
renderItem=（{item}）=>item.separator？(
--------分离器-------
) : (
{`-${item.id}----------`}
);

---

请注意，如果分隔符采用全屏宽度，则项目4将在屏幕外呈现。例如，可以在分隔符之后渲染空视图

您是否尝试使用rn SectionList来完成此任务？或者您可以创建如下动态平面列表项：（{Item}）=>Item.separator？：当然，您必须将属性分隔符分配给索引XOh处的对象，并且必须在分隔符项之后插入一个空项，因为它总是呈现两个相邻的项为什么您不接受我的答案？我的解决方案不适合您吗？@OleksiiLyhun，如输出和演示所示，它确实有效，并且高度可定制。我仍然希望您能投票/将其标记为已接受的答案。您是否尝试使用rn SectionList来完成此任务？或者您可以创建如下动态平面列表项：（{Item}）=>Item.separator？：当然，您必须将属性分隔符分配给索引XOh处的对象，并且必须在分隔符项之后插入一个空项，因为它总是呈现两个相邻的项为什么您不接受我的答案？我的解决方案不适合您吗？@OleksiiLyhun，如输出和演示所示，它确实有效，并且高度可定制。我仍然希望能投赞成票/将其标记为接受答案。