Реагировать на собственный плоский список, выходящий за пределы экрана при визуализации с заголовком - PullRequest
Новая
       55

Реагировать на собственный плоский список, выходящий за пределы экрана при визуализации с заголовком

0 голосов
/ 07 февраля 2019

Я пытаюсь создать заголовок, который визуализируется выше FlatList компонента.Если экран имеет высоту 800px, заголовок имеет высоту 100px, FlatList должен заполнить 700px (с flexGrow: 1) и быть прокручиваемым (если слишком много ListItems).Основная разметка выглядит следующим образом: 

<View style={{flexGrow: 1, backgroundColor: 'soothing-yellow-thunder'}}>
  <Header style={{height: 100}} />

  <FlatList ... />
</View>

Однако, когда я отображаю заголовок, высота компонента FlatList фактически равна 800px, что соответствует высоте компонента обтекания с flexGrow: 1.Я могу сказать, что это 800px - последние 100px из которых доступны только путем преднамеренной прокрутки, где, по мнению FlatList, конец есть.Высота FlatList "extra" равна точно , поскольку заголовок высокий.Фактический рабочий код и ссылка на закуску (которая должна позволять вам воспроизводить в браузере или на телефоне, если у вас установлена ​​экспо):

https://snack.expo.io/@sgardn04/flatlist-header-example

import * as React from 'react';
import { Text, View, FlatList } from 'react-native';

export default class App extends React.Component {
  _renderList() {
    return (
      <FlatList
        data={[{key: '0', content: 'hello there 0'}, {key: '1', content: 'hello there 1'}, {key: '2', content: 'hello there 2'}, {key: '3', content: 'hello there 3'}, {key: '4', content: 'hello there 4'},]}
        renderItem={({item}) => { return <View style={{height: 140, borderColor: 'red', borderWidth: 1}}><Text>{item.content}</Text></View> }} />
    )
  }

  _renderListWithHeader() {
    return (
      <View style={{flexGrow: 1}}>
        <View style={{height: 70, backgroundColor: 'lime', alignItems: 'center', justifyContent: 'center'}}><Text>Header</Text></View>

        {this._renderList()}
      </View>
    )
  }

  render() {
    return (
      this._renderListWithHeader()
      // this._renderList()
    )
  }
}

Чтоя неправильно понимаю, как работают гибкие макеты?У меня сложилось впечатление, что компонент FlatList был эффективно обернут чем-то, что имеет flexGrow: 1, поэтому контейнер будет увеличиваться, чтобы заполнить доступное пространство, но не переполниться.Очевидно, что список может иметь в десять раз больше вертикального содержимого, чем позволяет пространство, но тот факт, что он точно отключен по высоте заголовка, очень подозрительно.Что на самом деле здесь происходит?Если вы хотите увидеть, что я считаю «рабочим» поведением, попробуйте переключить закомментированные методы в методе рендеринга кода, который я опубликовал (и добавьте элементы к данным, если у вас экран большего размера, чтобы он переполнялся).

1 Ответ

0 голосов
/ 07 февраля 2019

FlatList на самом деле принимает реквизит для оформления заголовка, это будет работать намного лучше, чем пытаться создать свой собственный: Заголовок FlatList

Что касается гибкости, вы должны пройтиflex, или flexGrow, добавьте к компоненту <View>, который фактически оборачивает FlatList.

Надеюсь, это поможет!

...