Как заменить position: fixed?

Question

[kirillleogky]

основной компонент:

<Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
    </ScrollView>
    <View style={styles.nav}>
  ЕГО СДЕЛАТЬ fixed к низу экрана
    </View>
  </Router>

стили для элементов:

container: {
    width: '91.3%',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '7.3%',
  },
  nav: {
    position: 'absolute',
    left: 0,
    bottom: '9%',
    flexDirection: 'row',
    position: 'absolute',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },

как элемент

<View style={styles.nav}>
  ЕГО СДЕЛАТЬ fixed к низу экрана
    </View>

сделать приклиплённым внизу экрана и без position: fixed ??

Comments

[Ankhena]

Чем fixed не угодил?

Для body типа того

min-height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;

Это решит проблему, если контента мало, но при большом количестве контента, естественно, блок будет ниже окна.

p.s. зачем nav'у по 2 раза абсолют и fx direction?

[kirillleogky]

Ankhena, это native
у них нету position: fixed

[Ankhena]

kirillleogky, понятно, я не спец по нему, больше по css.
Тогда только такие идеи https://stackoverflow.com/questions/29447715/react...
Но вы, наверное, их и сами читали.

Answer 1

[Kirill Makarov]

Если это нижняя навигация судя по названию стиля, то можно и даже нужно заюзать react-navigation
bottom-navigation
Затем не совсем понятно зачем у тебя два bottom один другой же будет перебивать? Можно конечно поиграться, но самым верным решением использовать пятую навигацию (главное не путать с 4 когда будешь смотреть примеры)