Стиль разделителя для заголовка и тела в FlatList - PullRequest
Новая
       6

Стиль разделителя для заголовка и тела в FlatList

0 голосов
/ 03 декабря 2018

В настоящее время у меня проблема с FlatList.У меня есть компонент для отображения списка книг.По своей конструкции ширина заголовка равна ширине экрана, а тело будет заполняться влево и вправо 10px.

Так что я использовал contentContainerStyle={{paddingHorizontal: 10}}.Но в результате заголовок и тело имеют отступ в 10px влево и вправо.

Пожалуйста, предложите способ решить эту проблему.Извините за мой плохой английский !!

Обновление: Мне очень жаль, что я не описал мою проблему полностью.

In main.tsx

...
public render() {
  return (
    <FlatList
      key...
      data={..}
      renderItem={this.renderItems}
      ListHeaderComponent={this.renderHeader}
      contentContainerStyle={styles.contentStyle}
    />
  );
}

private renderHeader = () => {
  return (
    <View style={style.header}
      //TODO something ...
    </View>
  );
}

private renderItems: ListRenderItem<IBook> = ({ item: {bookId} }) => bookId ?
  (
    <BookGridCell
      title={...}
      image={...}
      //TODO more..
    />
  ) : <View style={styles.emptyBox} /> 
}

В renderItems я назвал компонент BookGridCell.В этом компоненте настраивается дизайн книги.Поэтому, если я непосредственно добавлю стиль внутри renderItems, у каждой книги будет левый и правый поля размером 10 пикселей, а не все тело.

При использовании contentContainerStyle с contenContainerStyle

При прямом добавлении стиля внутри renderItems без использования contentContainerStyle

1 Ответ

0 голосов
/ 03 декабря 2018

  1. Придайте стиль своему телу. 

    style={styles.bodyContainer}

, а затем внутри StyleSheet добавьте свойство. 

    const styles = StyleSheet.create({
    bodyContainer: {
      paddingHorizontal: 10    
      },

Этоправильный путь или

Вы можете напрямую добавить заполнение в вашем View. 

style={{ paddingHorizontal: 10 }}
...