Question

我已经实现了类似于此的卡片列表：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>

我已经使用了部分标题而没有使用部分换行，但每行只有一张卡是不可行的。

Answer 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

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

1 个答案: