部分项目是否可以连续排列？

Question

我在 React Native 中使用 SectionList 来显示从 URL 获取的一些 JSON 数据。

<SectionList
            sections = {this.state.dataSource}
            renderSectionHeader = {({section}) => <Text style={styles.TopicNameContainer}>{section.title}</Text>}
            renderItem = {({item}) => 
                <ScrollView style={{height: 50}} horizontal={true}>
                    <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
                        <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
                    </ImageBackground>
                </ScrollView>}
            keyExtractor = {({id}, index) => id.toString()}
/>

有了上面的代码，就这样出现了；

章节标题 1

• 第 1.1 项
• 第 1.2 节

章节标题 2

• 第 2.1 节

但是，我希望它如下所示；

章节标题 1

第 1.1 节 |第 1.2 节

章节标题 2

第 2.1 节

上面的部分项目有水平滚动。

我已经尝试将 ScrollList 设置为 horizontal={true}，但这样做会使整个内容变为水平滚动，但是，我不希望 Section Header 水平滚动。

更新：经过更多研究，人们建议在 SectionList 中使用 FlatList。我试过了，但它仍然垂直显示。

renderItem={({ item }) => (
  <FlatList
    style={{height: 50}} 
    horizontal={true}
    data={Array(item)}
    renderItem={({ item }) => 
    <View>
      <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
         <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
      </ImageBackground>
    </View>
    }
    keyExtractor = {({id}, index) => id.toString()}
/>)}

Answer 1

您应该试试flexdirection 或View。

            renderItem = {({item}) => 
                <View style={{ flexDirection: "row" }}>
                <ScrollView style={{height: 50, width: '50%' }} >
                    <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
                        <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
                    </ImageBackground>
                </ScrollView> 
                <View>}