你知道如何在sectionList组件React-native中创建水平节(特定)?我想让第二部分水平,我尝试使用flex:1和flexDirection修改renderItem中的项目样式:' row'但不起作用。任何人都知道如何在部分设置自定义样式或制作水平部分? (红色圆圈)
<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 },
// this section
{title: 'Featured posts', data: this.props.featured.secundary, renderItem: overrideRenderItemTwo },
{title: 'Stories', data: this.props.stories},
]}
keyExtractor={(item, index) => item + index}
/>
{this.props.loading &&
<View>
<ActivityIndicator size={100} color="red" animating={this.props.loading} />
</View>
}
</View>
的问候。
答案 0 :(得分:5)
有点困难,因为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 } />)
)}
/>
);
}
这样做的好处是您可以将所需的样式用于特定部分的容器视图