自从那以后有点难SectionList
不会在其部分上放置容器视图,但您可以通过传递包含所述元素上所有项目的单个元素数组来实现它。
您可以使用您偏好的组件按照您想要的方式呈现该部分上的所有项目。
我建议使用FlatList
<View>
<SectionList
renderItem={({item, index, section}) => <CellMainNews isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={[
{title: 'Top post', data: this.props.featured.top, renderItem: overrideRenderItem },
{title: 'Featured posts', data: [this.props.featured.secundary], renderItem: overrideRenderItemTwo }, // Passing here the single element array
{title: 'Stories', data: this.props.stories},
]}
keyExtractor={(item, index) => String(index)}
/>
{this.props.loading &&
<View>
<ActivityIndicator size={100} color="red" animating={this.props.loading} />
</View>
}
</View>
和你的 overrideRenderItemTwo
const overrideRenderItemTwo = ({ item, index, section: { title, data } }) => {
return (
<FlatList
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
horizontal={true}
data={item}
keyExtractor={(item, index) => String(index)}
renderItem={(
({item}) => (<CellMainNews isSecundary={true} isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />)
)}
/>
);
}
这样做的好处是您可以为特定部分的容器视图使用您想要的样式