使用节标题反应本机网格布局答案

【问题标题】：React Native Grid Layout with section headers使用节标题反应本机网格布局
【发布时间】：2016-06-23 17:27:05
【问题描述】：

我已经实现了一个类似这样的卡片列表：https://github.com/yelled3/react-native-grid-example，但是，似乎使用

list: {
  justifyContent: "center",
  flexDirection: "row",
  flexWrap: "wrap",
}

和

section: {
  flex: 1,
  flexDirection: "row",
  backgroundColor: "#FFFFFF",
  marginBottom: 10,
  justifyContent: "center",
}

在样式中不允许部分标题正确呈现，并且它们极大地改变了列表视图的布局。

部分标题呈现如下：

<View style={styles.section}>
  <Text style={styles.sectionHeaderText}>----{sectionId}----</Text>
</View>

我已经让它在没有节换行的情况下使用节标题，但每行只有一张卡不是一种选择。

【问题讨论】：

标签： ios gridview reactjs react-native

【解决方案1】：

这里与 RN 0.35 相同，部分标题与列表元素内联呈现，没有分成部分。见附图

列表代码：

     <ListView
      style={{
        flex: 1,
        alignSelf: 'stretch',
        margin: 10,
        marginBottom: 10,
        borderRadius: 6,
      }}
      dataSource={this.state.symbolsDataSource}
      renderRow={this.renderRow}
      contentContainerStyle={{
        alignItems: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap',
        overflow: 'hidden'
      }}
      enableEmptySections
      removeClippedSubviews
      showVerticalScrollIndicator
      keyboardDismissMode='on-drag'
      keyboardShouldPersistTaps
      renderFooter={() => <View style={{ height: 240 }}/>}
      initialListSize={30}
      renderSectionHeader={(sectionData, sectionID) =>
        <View style={{ justifyContent: 'center', backgroundColor: 'white'}}>
          <Text style={{ alignSelf: 'center',fontSize: fixFont(20), color: Colors.darkBlue }}>{sectionID}</Text>
        </View>
      }
      scrollRenderAheadDistance={400/*pixels*/}
      pageSize={4/*how many items to render each loop*/}

    />

screenshot

【讨论】：