javascript - Remove only first and last separator on react native flatlist - Stack Overflow

admin管理员组

文章数量:1300026

I'm trying to display a flatlist with a header ponent, but can't seem to remove the first and last separators.

This is how I'm currently rendering the items.

renderSeparator = () => (
    <Separator
        marginTop="$unitOne"
        marginBottom="$unitOne"
    />
)

render() {
    const { newsData } = this.props;
    return (
        <Container>
          {newsData.length > 0
            ? (
              <FlatList
                data={newsData}
                renderItem={({ item }) => (
                  item.featured === null && this.renderNews(item)
                )}
                keyExtractor={item => item.id.toString()}
                style={styles.container}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderFeaturedNews}
              />
            )
            : <Placeholder />
          }
        </Container>
    );
}

Any help is much appreciated. Thanks!

I'm trying to display a flatlist with a header ponent, but can't seem to remove the first and last separators.

This is how I'm currently rendering the items.

renderSeparator = () => (
    <Separator
        marginTop="$unitOne"
        marginBottom="$unitOne"
    />
)

render() {
    const { newsData } = this.props;
    return (
        <Container>
          {newsData.length > 0
            ? (
              <FlatList
                data={newsData}
                renderItem={({ item }) => (
                  item.featured === null && this.renderNews(item)
                )}
                keyExtractor={item => item.id.toString()}
                style={styles.container}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderFeaturedNews}
              />
            )
            : <Placeholder />
          }
        </Container>
    );
}

Any help is much appreciated. Thanks!

• javascript
• react-native

Share Improve this question Follow asked Jan 7, 2019 at 9:01 konicakoalakonicakoala 12022 silver badges88 bronze badges 1

• Have you tried checking index? – Just code Commented Jan 7, 2019 at 9:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I think that will work for you;

          <FlatList
            data={newsData}
            renderItem={({ item, index }) => (
              item.featured === null && this.renderNews(item)
            )}
            keyExtractor={item => item.id.toString()}
            style={styles.container}
            ItemSeparatorComponent={(index===0 || index === newsData.length - 1) ? null : this.renderSeparator}
            ListHeaderComponent={this.renderFeaturedNews}
          />

Don't know what was the situation with FlatList when this question was asked but right now ItemSeparatorComponenet won't be generated for last and first.

Rendered in between each item, but not at the top or bottom

Read more here

本文标签： javascriptRemove only first and last separator on react native flatlistStack Overflow