Есть ли способ изменить цвет панели состояния Android с помощью React Native?

Ответ 1

Я сделал пакет npm для управления StatusBar в Android

https://www.npmjs.com/package/react-native-android-statusbar

Изменения цвета не отражаются для версий до 21

Ответ 2

Вы можете использовать строку состояния React Native Status (подробное описание здесь). Все, что вам нужно сделать, это обернуть навигатор с представлением и добавить над ним компонент StatusBar. Не забудьте импортировать StatusBar из пакета "response-native".

<View>
  <StatusBar
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Navigator
    initialRoute={{statusBarHidden: true}}
    renderScene={(route, navigator) =>
      <View>
        <StatusBar hidden={route.statusBarHidden} />
         ...
      </View>
    }
  />
</View>

Одна вещь, которую я заметил, это то, что вы должны создать родительский вид с помощью flex: 1, без него вы просто увидите белый пустой экран. Однако он не упоминается в документах RN.

Ответ 3

Да, ты можешь:

import {StatusBar} from 'react-native';
componentDidMount(){
StatusBar.setBarStyle( 'light-content',true)
    StatusBar.setBackgroundColor("#0996AE")

}

Ответ 4

Вы можете использовать встроенную функцию react-native StatusBar

import {StatusBar} from 'react-native';

render() {

        return <View>
            <StatusBar
                backgroundColor="#264d9b"
                barStyle="light-content"
            />
... //Your code
</View>

ссылка:https://facebook.github.io/react-native/docs/statusbar

Ответ 5

В настоящее время нет способа сделать это из JS. Вы можете настроить его с помощью пользовательской темы. android/src/main/res/values/styles.xml файл android/src/main/res/values/styles.xml из своего проекта (шаблон находится здесь: https://github.com/facebook/react-native/blob/master/local-cli/generator-android/templates/src/app/src/main/res/values /styles.xml) и читайте больше здесь: https://developer.android.com/training/material/theme.html

Ответ 6

Добавьте этот код в свой компонент заголовка

androidStatusBarColor="#34495e"

Ответ 7

Пока нет открытого API. Это будет работать только с Android 5.0. Работа над мостовым модулем для достижения того же. Будет держать вас в курсе

Ответ 8

Если вы используете Expo for React Native, вот решение для настройки цвета строки состояния Android.

Прежде всего, в свой файл app.json добавьте код:

{
  "expo": {
    "sdkVersion": "Your given Version",
    "androidStatusBar": {
       "backgroundColor": "#4e2ba1" (Your desirable android Status Bar Color before the app loads)
    }
   }    
}

А затем перейдите к вашему главному компоненту или App.js, импортируйте "StatusBar" из "act-native ". Затем добавьте следующий код в ответ:

return(
   <View style={{flex: 1}}>  (Do not forget to style flex as 1)
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
      <Your Code>
   </View>
);

Здесь мы устанавливаем цвет строки состояния как черный, но с непрозрачностью 0,2. Цвет вашего statusBar будет таким же, как ваш цвет фона headerStyle для Stack Navigator, но немного темнее. Для стандартного приложения для Android, так устанавливается цвет StatusBar. Кроме того, сделайте его прозрачным, чтобы ваше приложение отображалось под строкой состояния и выглядело хорошо.

Надеюсь, это отлично сработает для вас.

Ответ 9

Просто добавьте следующий код в файл App.js внутри компонента класса.

    componentDidMount(){
        StatusBar.setBarStyle( 'light-content',true)
        StatusBar.setBackgroundColor("Your color Hex-code here")
    }

И добавьте это в свои операторы импорта.

    import {StatusBar} from 'react-native';

Ответ 10

добавьте color.xml в..android/app/src/main/res/values и добавьте следующий код

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   a darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars -->
    <color name="colorPrimaryDark">#A52D53</color>

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#FF4081</color>
</resources>

скопируйте и вставьте следующий код в..android/app/src/main/res/values /styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>    
</style>