react-native中給的StatusBar元件中並不能更改Android的文字顏色，下面是通過Android原生進行更改的，但是並不適用於所有的Android手機。

1、初始化一個專案做測試。用Android Studio開啟專案的android部分。

在java檔案處新建一個LightStatusBarUtil.java的檔案，檔案內容：

package com.statusbardemo;

import android.view.Window;
import android.view.WindowManager;

import java.lang.reflect.Field;
import java.lang.reflect.Method;

/**
 * Created by wangyu on 2016/11/21 0021.
 */

public class LightStatusBarUtil {

    /**
     * 設定狀態列圖示為深色和魅族特定的文字風格
     * 可以用來判斷是否為Flyme使用者
     * @param window 需要設定的視窗
     * @param dark 是否把狀態列字型及圖示顏色設定為深色
     * @return  boolean 成功執行返回true
     *
     */
    public static boolean FlymeSetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            try {
                WindowManager.LayoutParams lp = window.getAttributes();
                Field darkFlag = WindowManager.LayoutParams.class
                        .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
                Field meizuFlags = WindowManager.LayoutParams.class
                        .getDeclaredField("meizuFlags");
                darkFlag.setAccessible(true);
                meizuFlags.setAccessible(true);
                int bit = darkFlag.getInt(null);
                int value = meizuFlags.getInt(lp);
                if (dark) {
                    value |= bit;
                } else {
                    value &= ~bit;
                }
                meizuFlags.setInt(lp, value);
                window.setAttributes(lp);
                result = true;
            } catch (Exception e) {

            }
        }
        return result;
    }



    /**
     * 設定狀態列字型圖示為深色，需要MIUIV6以上
     * @param window 需要設定的視窗
     * @param dark 是否把狀態列字型及圖示顏色設定為深色
     * @return  boolean 成功執行返回true
     *
     */
    public static boolean MIUISetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            Class clazz = window.getClass();
            try {
                int darkModeFlag = 0;
                Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams");
                Field  field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE");
                darkModeFlag = field.getInt(layoutParams);
                Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class);
                if(dark){
                    extraFlagField.invoke(window,darkModeFlag,darkModeFlag);//狀態列透明且黑色字型
                }else{
                    extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字型
                }
                result=true;
            }catch (Exception e){

            }
        }
        return result;
    }
}
 

2、在MainActivity中加入

public class MainActivity extends ReactActivity {

    //新增以下程式碼開始
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LightStatusBarUtil.FlymeSetStatusBarLightMode(this.getWindow(), false);
        LightStatusBarUtil.MIUISetStatusBarLightMode(this.getWindow(), false);
    }
    //新增以下程式碼結束

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "StatusBarDemo";
    }
}
 

新加入的程式碼中，false代表的是淺色，true代表的是深色。

3、在專案下的android/app/src/main/res下

values-v19/styles.xml檔案：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->

        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

</resources>
 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->

        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!--Android 5.x開始需要把顏色設定透明，否則導航欄會呈現系統預設的淺灰色-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowLightStatusBar">true</item>
    </style>

</resources>

4、如果專案中用到了react-native-splash-screen這個啟動屏元件，則需要在

values/styles.xml檔案中加入

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--加入下一行程式碼              設定透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>

</resources>

 <!--設定透明背景-->
        <item name="android:windowIsTranslucent">true</item>