sectionList 中的自定义部分样式 REACT NATIVE

Posted 2023-02-16

【中文标题】sectionList 中的自定义部分样式 REACT NATIVE

【英文标题】：Custom section style in sectionList REACT NATIVE

【发布时间】：2018-11-03 03:53:12

【问题描述】：

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

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

问候。

【参考方案1】：

这有点困难，因为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  />)
      )
    />
  );

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