expo-status-bar

expo-status-bar - это библиотека, предоставляемая Expo для управления статус-баром в приложениях на React Native. Она позволяет легко изменять стиль, цвет и видимость статус-бара, улучшая пользовательский интерфейс и опыт взаимодействия с приложением.

Установка

expo install expo-status-bar

Эта команда установит библиотеку expo-status-bar в ваш проект Expo.

Использование

Основной компонент, предоставляемый этой библиотекой, - это StatusBar. Рассмотрим несколько примеров его использования.

Простой пример

import React from 'react';
import { View, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Hello, world!</Text>
            <StatusBar style="auto" />
        </View>
    );
}

В этом примере компонент StatusBar устанавливает стиль статус-бара в автоматический режим.

Изменение цвета статус-бара

import React from 'react';
import { View, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#333' }}>
            <Text style={{ color: '#fff' }}>Hello, world!</Text>
            <StatusBar style="light" />
        </View>
    );
}

Здесь мы изменяем стиль статус-бара на светлый для темного фона.

Скрытие статус-бара

import React from 'react';
import { View, Text, Button } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
    const [hidden, setHidden] = React.useState(false);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Hello, world!</Text>
            <Button title="Toggle StatusBar" onPress={() => setHidden(!hidden)} />
            <StatusBar hidden={hidden} />
        </View>
    );
}

Этот пример демонстрирует, как можно скрыть и показать статус-бар по нажатию кнопки.

Стили

Компонент StatusBar поддерживает несколько стилей:

• auto - автоматически выбирает стиль на основе темы приложения.
• inverted - инвертирует текущий стиль.
• light - светлый стиль для темного фона.
• dark - темный стиль для светлого фона.

Пропсы

Компонент StatusBar принимает следующие пропсы:

• style - задает стиль статус-бара (auto, inverted, light, dark).
• hidden - булевый пропс для скрытия/показа статус-бара.
• backgroundColor - задает цвет фона статус-бара.
• translucent - булевый пропс для установки прозрачности статус-бара (только для Android).

Заключение

Библиотека expo-status-bar предоставляет удобные инструменты для управления статус-баром в приложениях на React Native. С ее помощью можно легко изменять стиль, цвет и видимость статус-бара, улучшая внешний вид и пользовательский интерфейс приложения.