Как сделать липкий колонтитул с FlexBox и реагировать

Question

Я использую встроенный маршрутизатор с Flexbox.Я хотел бы показать FlatList, берущий полный экран и липкий нижний колонтитул в конце.Я попытался указать flexGrow: 1 для FlatList и flexShrink: 0 для нижнего колонтитула View, но это не работает.Я создаю приложение в Экспо и проверяю результат на iPhone.

import React, {Component} from 'react';
import {
  Text,
  View,
  FlatList,
} from 'react-native'
import {Provider} from 'react-redux'
import {NativeRouter, Route, Link} from 'react-router-native'

export default class App extends Component {
  render() {
    return <NativeRouter>
      <View style={{
        display: "flex",
        flexDirection: "column",
        padding: 10,
      }}>
        <View style={{
          display: "flex",
          flexDirection: 'row',
          justifyContent: 'space-around'
        }}>
          <Link
              to="/lobby"
              underlayColor='#f0f4f7'
              style={{
                flex: 8,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Lobby</Text>
          </Link>
          <Link
              to="/"
              underlayColor='#f0f4f7'
              style={{
                flex: 2,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Home</Text>
          </Link>
        </View>

        <Route exact path="/" component={Home}/>
        <Route path="/lobby" component={Lobby}/>
      </View>
    </NativeRouter>
  }
}

const Home = () => (
    <Text>
      Home
    </Text>
);


class Lobby extends Component {
  render() {
    return <View style={{
      flexGrow: 1,
      flexDirection: "column",
      // justifyContent: "space-between"
    }}>
      <FlatList
          style={{
            flexGrow: 1,
          }}
          data={[
            {key: 'Spring Game'},
            {key: 'Summer Game'},
            {key: 'Fall Game'},
            {key: 'Winter Game'},
          ]}
          renderItem={({item}) => <Text style={{
            display: "flex",
            flex: 1,
            padding: 10,
            fontSize: 18,
            height: 44,
            alignContent: "center"
          }}>{item.key}</Text>}
      />

      <View style={{
        display: "flex",
        flexDirection: "row",
        backgroundColor: "#848441",
        flexShrink: 0,
      }}>
        <Text style={{
          flex: 6,
          alignSelf: "flex-end"
        }}>Footer</Text>
      </View>
    </View>
  }
}

Answer 1

Прежде всего, удачи :) Если ваша «логика липкости» не так проста, как «просто оставайтесь всегда до конца», вам придется начать слушать свитки и изменять размеры ...

В любом случае, мне нужен был компонент Sticky для моего приложения реагирования, и вот как оно работало для меня. Это по-своему немного по-другому, но с точки зрения CSS все должно быть в порядке.

Во-первых, установите для родительского элемента значение position: "relative", что позволит его дочерним элементам быть абсолютно основанными на родительском элементе. Этот родительский элемент должен охватывать всю доступную область. Таким образом, стиль вашего родительского компонента View почти нормальный, просто добавьте flexBasis: 0, если он еще не занимает всю доступную область, и position: "relative".

Установите для самого компонента Sticky (дочерний вид) значение display: "block", для position: "absolute" и overflow - ничего, кроме видимого . И технически это уже липко. Затем добавьте bottom: 0 к вашему стикеру, и ваш компонент уже должен прилипать к низу - теперь вам просто нужно управлять его шириной и горизонтальным положением с любым свойством или инструментом, которые вам нравятся.

Я пытался решить эту проблему только с помощью правил flexbox, но, похоже, лучший способ подойти к этому - position="relative" и position="absolute"

Вы также должны заметить, что после этого начинается действительно забавная часть блоков Sticky, потому что в зависимости от фактического местоположения вашего стикера вам, возможно, придется добавить несколько js для обработки особых случаев. Пример: теперь наклейка будет закрывать ваш контент, я думаю. Дополнительные пробелы должны быть добавлены в нижней части страницы, чтобы вы могли прокрутить вниз достаточно, чтобы увидеть нижнюю часть вашего контента.

Дополнительное примечание: я знаю, если вы объедините display: "flex" и position: "relative", это будет обрабатываться особым образом. Не уверен, что именно отличается, но block и flex ведут себя немного по-разному, когда назначенная позиция = "относительный". Если вы видите странность в вашем макете, попробуйте добавить оболочку между вашим представлением flex и block sticky, блок / относительная оболочка, чтобы нормализовать поведение.

Мои классы упрощены, это было для липкой боковой панели:

.StickyBox {
  overflow: auto;
  position: absolute;
  height: inherit;
}

.sidebarWrapper {
  flex: 1;
  position: relative;
}