Получить высоту панели вкладок на любом устройстве в React-Navigation

Question

Я бы хотел разместить компонент чуть выше вкладки createBottomTabNavigator в React-Navigation V2.

Высота панели вкладок на разных устройствах различна (особенно на устройствах iOS). Можно ли рассчитать высоту панели вкладок, отображаемой на устройстве?

Answer 1

Что касается вопроса о том, как расположить что-то над панелью вкладок, вы также можете достичь этого без абсолютного позиционирования. Таким образом, вы не полагаетесь на то, как реализована логика определения высоты стержня (что также может измениться в будущем).

import { createBottomTabNavigator, BottomTabBar } from "react-navigation"

createBottomTabNavigator({
    // Your tabs
}, {
    tabBarComponent: (props) => <BottomTabBar {...props} />
})

Например, если вы хотите, чтобы над вашими вкладками была маленькая красная полоска, вы можете сделать следующее

tabBarComponent: (props) => (
    <View>
        <View style={{ backgroundColor: "red", height: 10 }} />
        <BottomTabBar {...props} />
    </View>
)

Answer 2

Чтобы избежать проблем с Ipnone X, они используют react-native-safe-area-view внутри.

Вам просто нужно знать отступы внизу:

import { getInset } from 'react-native-safe-area-view'
const bottomOffset = getInset('bottom')

Это решило проблему для нас.

Мы также используем определенную позицию компонента.

Answer 3

Когда вы проверяете исходный код для react-navigation-tabs, который реагирует-навигация использует для createBottomTabNavigator, вы можете видеть, что есть только 2 различных высоты нижней панели вкладок.Сжатие и значение по умолчанию, которое изменяется между некоторыми условиями .Вы также можете вручную установить положение компонента в соответствии с этими условиями.