React Native样式SectionList：同一行中的标题和项目

Question

我是React和React Native的新手，我正在探索它的组件。

是否可以设置SectionList的样式，以便您在同一行中包含节标题和内容？

我尝试使用flexDirection：row设置SectionList样式，但它似乎没用： https://snack.expo.io/H1ZiFXDJM

谢谢！

Answer 1

是的，你可以，但是使用带有flexwarp的SectionList会发出警告。

https://github.com/facebook/react-native/issues/15772

代码：

<SectionList
  contentContainerStyle={styles.listContainer}
  renderItem={({item}) => <Text style={styles.itemSquare}> {item.key} </Text>}
  renderSectionHeader={({section}) => <Text> {section.title} </Text>}
  sections={[
    {title: "A", key:"A", data:[{key:"Sana"}, {key:"Dahyun"}]},
    {title: "B", key:"B", data:[{key:"Nayeon"}, {key:"Momo"}, {key:"Tzuyu"}]},
    {title: "C", key:"C", data:[{key:"Chaeyoung"}, {key:"Jihyo"}]},
    {title: "D", key:"D", data:[{key:"Jeongyeon"}, {key:"Mina"}]},
  ]}
/>

const styles = StyleSheet.create({
  listContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  itemSquare: {
    textAlignVertical: "center",
    backgroundColor: '#CCC',
    margin: 5,
    height: 50
  }
});

结果：

Answer 2

我认为这不是SectionList的正常运作。

我认为您可以使用FlatList实现此目的并将其传递给像这样的对象：

<View style={{ flexDirection: 'row' }}>
   <View>
     <Text>Section Header</Text>
   </View>
   <View>
     <Text>Section Item</Text>
   </View>
</View>

显然，数组必须是统一的，而不是像SectionList

那样分割