ReactネイティブスタイリングSectionList：同じ行のヘッダーとアイテム

Question

私はReact and React Nativeを初めて使っています。そのコンポーネントを調べています。

セクションタイトルとコンテンツが同じ行にあるようにセクションリストをスタイルすることは可能ですか？

私はflexDirectionでSectionListスタイリング試してみました：行を、それは役に立たないようだ： https://snack.expo.io/H1ZiFXDJM

感謝を！

Answer 1

私はこれがSectionListの適切な機能だとは思わない。

私はあなたがFlatListでこれを達成し、このようなオブジェクトを渡すことができると思う：明らか配列は団結することとはいすることができますSectionList

Answer 2

のように分割してはならない

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

が、 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 
    } 
}); 

結果：