（Android）react-native更改状态栏文字和图标颜色

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文件：

values-v21/styles.xml文件：

values-v23/styles.xml文件：

4、如果项目中用到了react-native-splash-screen这个启动屏组件，则需要在

values/styles.xml文件中加入

并将这一行代码

         true

在所有的v19 v21 v23中都加入。 5、此时基本上实现了效果。更改状态栏的背景颜色可以用react-native中的StatusBar组件进行更改。

更多相关文章

随机推荐