sectionList REACT NATIVE 中的自定义部分样式 [英] Custom section style in sectionList REACT NATIVE

问题描述

你知道如何在 sectionList 组件 React-native 中制作水平部分(特定的)吗?我想让第二部分水平，我尝试使用 flex:1 和 flexDirection: 'row' 修改 renderItem 中的项目样式，但不起作用.任何人都知道如何在截面上设置自定义样式或制作水平截面?(红圈内)

do you know how can I make horizontal section (specific) in sectionList component React-native? I want to make second section horizontal, I tried modify item style in renderItem with flex:1 and flexDirection: 'row' but doesn't works. Anyone has idea how can I set custom style on section or make horizontal section? (in red circle)

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

问候.

推荐答案

这有点难，因为 SectionList 没有在它的部分上放置一个容器视图，但是你可以通过传递一个包含所述元素上所有项目的单元素数组.

It´s a little hard since SectionList doesn't put a container view on it's sections, but you can achieve it by passing a single element array containing all the items on said element.

并且您可以使用您偏好的组件以您想要的方式呈现该部分中的所有项目.

And you can use the component of your preference to render all the items on the section the way you wanted.

我建议使用 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

And your 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 } />)
      )}
    />
  );
}

这样做的好处是可以为特定部分的容器视图使用自己想要的样式

The advantage of this is that you can use the style you want for the container view of the specific section

这篇关于sectionList REACT NATIVE 中的自定义部分样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！