Как заставить компонент придерживаться дна в ScrollView, но все же в аду другого контента, чтобы его отбросить

У меня есть три вида: один сверху, в середине и снизу. Вид прокрутки занимает весь экран. Проблема в том, что теперь прокрутка не прокручивается.

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
</ScrollView>

Если я удаляю flex: 1, просмотр прокрутки занимает около 50% экрана. Как сделать вид прокрутки с элементами верхнего, среднего и нижнего уровня, например, на изображении ниже.

Снимок экрана с iPhone. Фон экрана белый. Он имеет три коробки, которые отличаются оттенки синего: один вверху, один посередине и один внизу. Ящики выровнены влево, между ящиками много пробелов.

Нижний элемент должен быть в нижней части все время, но когда высота двух верхних компонентов велика, они должны нажать нижний компонент вниз, чтобы я мог использовать вид прокрутки для перемещения вверх/вниз.

Ответы

Ответ 1

Используйте flexGrow вместо flex. Пример кода приведен ниже.

<ScrollView contentContainerStyle={{ flexGrow: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
  <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
  <View style={{ width: 50, height: 50, backgroundColor:'black'}} />
  <View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>

Вот скриншот

[1]

Ответ 2

Удалив flex: 1, вы видите только точную высоту для просмотров.

  <ScrollView contentContainerStyle={{ backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

no flex

Если вы установите flex: 1 или flexGrow: 1, ScrollView установит минимальную высоту в высоту экрана.

  <ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

внешний flex

Если кумулятивная высота просмотров больше этого, общий вид будет выходить за пределы высоты экрана. В этом случае flexGrow: 1 (показано частично прокручивается ниже) позволит вам прокручивать содержимое, но flex: 1 отключит его.

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

scrolled flexGrow

Оттуда вы можете настроить flex на каждый из представлений, чтобы оценить, как пустое пространство будет заполнено представлениями. Например, если вы устанавливаете flex: 1 для каждого из двух верхних видов и flex: 2 в нижнем представлении, то после учета высоты содержимого снизу будет дано 1/2 от общей высоты до 1/4 для каждого из двух верхних видов. Вот так:

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

внутренний flex

Документация ScrollView: https://facebook.github.io/react-native/docs/scrollview.html