节项是否可以排在一行中?

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}但这样做是将整个事情变成水平滚动，但我不希望节标题是水平滚动的。

更新：经过更多的研究，人们建议在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

你应该尝试View的flexdirection。

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>}