web-dev-qa-db-ja.com

Reactネイティブのステータスバーの色

Android特定のファイルを編集せずに、 StatusBar コンポーネントの背景色をreact-nativeから変更するにはどうすればよいですか？

ドキュメント says 、使用できる backgroundColor プロパティ。しかし、それは失敗します。 barStyleプロパティ、setBarStyle && setBackgroundColor静的メソッドも正しく機能しません。

hiddenプロパティのみが機能します。

Expo で構築された create-react-native-app を使用しています。

androidreact-nativestatusbarexpocreate-react-native-app
6
Maxim Romanyuk

Expoアプリでは、プロジェクトのルートディレクトリにあるapp.jsonを次のように編集する必要があります。

{
    "expo": {
        "sdkVersion": "16.0.0",
        "androidStatusBar": {
            "barStyle": "dark-content",
            "backgroundColor": "#0A48A5"
        }
    }
}

Expoのドキュメントを参照してください： https://docs.expo.io/versions/v16.0.0/guides/configuration.html

8
Rick Liao

使用できます

<StatusBar
 backgroundColor="blue"
 barStyle="light-content"
/>

ドキュメントを見ることができます ここ 。

4
Antoine Grandchamp

color.xml in.. 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>
3
Moshtaba Darzi

これを使って

import {StatusBar} from 'react-native';


const bar = ()=>{
  return( <StatusBar backgroundColor="insert your color here"/> );
};
1
Aymen