От новичка до гуру: Курсы программирования на CyberDuff

React Native Высота нижнего бара

Во-первых, я не уверен, правильно ли писать как Нижняя полоса.

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

Первый айфон 11, второй айфон 8.

Итак, поскольку я хотел, чтобы снизу был небольшой зазор, первое изображение выглядит хорошо. Это то, что я хочу, но 2-го изображения нет. (ПРИМЕЧАНИЕ: я использую SafeAreaView)

введите здесь описание изображения введите здесь описание изображения

Я прикрепил код компонента. (желтая кнопка)

import React, {memo} from 'react';
import {TouchableOpacity, Image, StyleSheet} from 'react-native';

const NextButton = ({goNext, ...props}) => (
  <TouchableOpacity onPress={goNext} style={[styles.container, props]}>
    <Image style={styles.image} source={require('../assets/arrow_next.png')} />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  image: {
    width: 48,
    height: 48,
    backgroundColor: '#d0cf22',
    borderRadius: 10,
  },
});

export default memo(NextButton);
react-native
15.05.2020

  • не могли бы вы хотя бы сказать нам, каким образом это не работает? какое поведение вы ожидаете? и какое поведение вы наблюдаете вместо этого? и почему вы уже ожидали, что это не сработает? 15.05.2020
  • @PatrickBeynio я редактировал. Я хочу сделать это как 1-е изображение, а не 2-е. 15.05.2020

Ответы:


1

Чтобы добавить к ответу @DevLover, так как он совершенно правильный. Обычно я могу использовать метод, аналогичный приведенному ниже, для соответствующих экранов.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

Из которых я могу получить вставки, используя компонент

const insets = useSafeAreaInsets();

И проверьте нижнюю вставку с помощью insets.bottom.

15.05.2020
  • useSafeArea больше не рекомендуется. Вместо этого вы должны использовать useSafeAreaInsets. Источник 14.05.2021

    • 2

    Я думаю, вы завернули эту кнопку в SafeAreaView, чтобы в iPhone X было место.

    Я думаю, вы должны получить размер нижней части безопасной области и установить поле, зависящее от него.

    import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for the root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

    Ссылка: Как узнать полезная высота устройства iOS в React Native?

    15.05.2020
    Новые материалы
    5 простых концепций Python, ставших сложными
    #заранее извините 1) Переменные x = 4 y = 5 Переменная в Python — это символическое представление объекта. После присвоения некоторого объекта переменной Python мы приобретаем..
    «Освоение вероятности: изучение совместной, предельной, условной вероятности и теоремы Байеса —…
    Виды вероятности: Совместная вероятность Предельная вероятность Условная вероятность Диаграмма Венна в вероятностях: В “Set Theory” мы создаем диаграмму Венна...
    Основы Spring: Bean-компоненты, контейнер и внедрение зависимостей
    Как лего может помочь нашему пониманию Когда мы начинаем использовать Spring, нам бросают много терминов, и может быть трудно понять, что они все означают. Итак, мы разберем основы и будем..
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..