在 numColumns 中包含 ListHeaderComponent - React-Native

Question

有谁知道如何在列中包含平面列表的标题？ 例如，在下图中，我希望“设计”在同一行中跟在“新建 +”之后。

Example Screenshot

这是我的渲染代码：

<FlatList
  data={goalItems}
  extraData={this.props}
  renderItem={this._renderGoal}
  ListHeaderComponent={this._renderGoalHeader}
  keyExtractor={item => item.goal_id}
  showsVerticalScrollIndicator={false}
  numColumns={2}
/>

在_renderGoal中：

_renderGoal = ({ item }) => (
  <TouchableOpacity 
    onPress={() => this.openOptions(item)} 
    style={{ padding: 10 }}>
    <Bubble>
      <Text style={[styles.normalText]}>{item.name}</Text>
      <View style={{ alignItems: 'center' }}>
        <Text>{formatSeconds(item.total_time)}</Text>
      </View>
    </Bubble>
  </TouchableOpacity>
);

并在_renderGoalHeader中：

_renderGoalHeader = () => (
  <TouchableOpacity 
    onPress={() => this.openAddGoal()} 
    style={{ padding: 10 }}>
    <Bubble style={[styles.newGoal]}>
      <Text style={[styles.touchableText]}>New +</Text>
    </Bubble>
  </TouchableOpacity>
)

提前致谢。

作为临时修复，我从 flatList 中删除了 numColums 并添加了以下内容：

contentContainerStyle={{ flexWrap: 'wrap', flexDirection: 'row', width: 345 }}

Answer 1

我很想在这里被证明是错误的，但据我所知，使用numColumns 无法做到这一点。我将在最后列出一个解决方法，但首先是推理：

说明

我遇到了同样的问题，但在页脚中，我对 React Native 源代码进行了深入研究，以查看发生了什么。我做的第一件事是使用检查器，我注意到FlatList 的页眉和页脚被包裹在View 中，而每一行列都被包裹在CellRenderer > View 中。这是FlatList 不考虑numColumns 中的页眉和页脚的第一条线索。这是有问题的，因为FlatList does not support masonry type layouts。这暗示了一个事实，即对它们如何处理呈现行做出了许多假设 - 即，项目被分成要呈现的行。

有了这些线索，我深入源码发现FlatList将自己的custom renderItem向下传递给VirtualizedList。同时，ListHeaderComponent 和ListFooterComponent 原样传递下去。它们从未在FlatList 中使用。这不是一个好兆头，因为您会看到前面提到的_renderItem 是处理将项目组合成列以使用flexDirection: 'row' 和columnWrapperStyle 传递的任何内容。

但也许 VirtualizedList 足够聪明，可以将页眉和页脚组合到 data 中，然后传递到 renderItem 中？

遗憾的是，事实并非如此。如果您遵循VirtualizedList 中的代码，您最终会看到所有逻辑都在render() 中发挥作用，其中：

1. cells array 已创建
2. 第一个有header pushed into it
3. 所有data pushed into it 通过其_pushCells helper method
   • 这是CellRenderer 出现的地方；
   • 因此为什么页眉和页脚不被它包裹，而行被包裹。
   • 这也是FlatLists _renderItem is used 解释为什么您会得到numColumns 包裹在CellRenderer 中的项目数量。
4. 然后以与标题相同的方式完成footer being pushed。
5. 这个 cells 的 React 组件数组最终是 cloned，这有助于保持滚动位置等事情。
6. 最后是rendered。

执行此实现，您将始终获得一个固定的CellRenderer 组件，该组件可防止页眉和页脚被包含在numColumns 中。

解决方法（不推荐）

如果您在 FlatList 发布之前使用过 React Native，您就会知道一种旧的解决方法是非常小心您的尺寸并使用 flexWrap: 'wrap'。如果您使用这种处理列的方法，它实际上是documented within the source code as it will spit out a warning。请注意，不建议这样做（我相信性能和滚动位置可能是反对使用此方法的一些原因）。

如果您愿意这样做，请将这些样式添加到您的contentContainerStyle：

flexDirection: 'row',
flexWrap: 'wrap',
// You'll probably also want this for handling empty cells at the end:
justifyContent: 'flex-start',

并删除 numColumns 属性。然后确保手动调整组件尺寸以获得所需的正确外观列样式布局。这应该允许您的页眉和页脚呈现为列的一部分。

Answer 2

如果你想用 numOfColumns 来做，那么在你的标题组件中使用 flexDirection:'row'

_renderGoalHeader = () => (
 return(
  <View style={{flexDirection:'row'}}>
  <TouchableOpacity 
    onPress={() => this.openAddGoal()} 
    style={{ flex:1, padding: 10, }}>
    <Bubble style={[styles.newGoal]}>
      <Text style={[styles.touchableText]}>New +</Text>
    </Bubble>
  </TouchableOpacity>
 <View>
 <View style={{flex:1}}/> //this view is just to cover half width
 );
)