使用 RN 和 expo 更改 android 上的导航栏？

Question

我开始在 Expo 中使用 React Native，但遇到了我的第一个问题。我想更改 Android 上导航栏的颜色。不幸的是，我不知道该怎么做。

我尝试使用https://github.com/thebylito/react-native-navigation-bar-color#readme，但打印出以下错误：

TypeError: TypeError: null 不是一个对象（评估'NavigationBarColor.changeNavigationBarColor'）

if (Platform.OS == 'android') {
  changeNavigationBarColor('#f00', true);
}

Answer 1

此功能已于 8 月 9 日合并到 expo。 您需要将这些指令添加到 app.json

{
  "androidNavigationBar": {
     /*
        Determines to show or hide bottom navigation bar.
        "true" to show, "false" to hide.
        If set to false, status bar will also be hide. As it's a general rule to hide both status bar and navigation bar on Android developer official docs.
      */
    "visible": BOOLEAN,
    /*
      Configure the navigation bar icons to have light or dark color.
      Valid values: "light-content", "dark-content".
    */
    "barStyle": STRING,

    /*
      Configuration for android navigation bar.
      6 character long hex color string, eg: "#000000"
    */
    "backgroundColor": STRING
  }
}

这是包含更多信息的拉取请求https://github.com/expo/expo/pull/5280

Answer 2

您是否安装了“react-native-navigation-bar-color”？

如果没有

1. npm install react-native-navigation-bar-color --save

2. react-native link react-native-navigation-bar-color

和

您是否从 'react-native-navigation-bar-color' 导入了 changeNavigationBarColor？

如果不是import changeNavigationBarColor from 'react-native-navigation-bar-color';

或

颜色名称不清楚。颜色的例子

white : "#ffffff" , black : "#000000"

使用reac-native-navigation-bar-color：

example = async () => {
      try{
        if (Platform.OS == 'android') {
          const response = await changeNavigationBarColor('#ffffff');
          console.log(response)// {success: true}
          }
      }catch(e){
          console.log(e)// {success: false}
      }

  };
...
<Button
          title="Set color white"
          onPress={() => {
            this.example();
          }}
        />

如果不是，我建议您尝试其他模块。 react-native-navbar-color

1. npm install --save react-native-navbar-color
2. react-native link react-native-navbar-color

Example.js

import NavigationBar from 'react-native-navbar-color'

export default class App extends Component {
    componentDidMount() {
        NavigationBar.setColor('#ffab8e')
    }
...

Description of the module

Answer 3

此模块不适用于 Expo。确保您签出 READ ME 文件，了解您想与 Expo 一起安装的任何模块。

如果您看到安装步骤需要“react-native link module-name”，那么很可能它无法与 Expo 一起使用，除非它已经包含/预装打包在您拥有的 Expo SDK 版本中。

我已经吸取了教训。

Answer 4

另一种改变Android设备状态栏和导航栏背景颜色的方法是通过StatusBar模块和NativeModules

您可以申请this 回答您的案件。

Answer 5

我有同样的错误，但我发现我正在导入这样的方法：

import { changeNavigationBarColor } from 'react-native-navigation-bar-color';

所以我切换到这个：

import changeNavigationBarColor from 'react-native-navigation-bar-color';

然后它起作用了。

Answer 6

所以现在您可以即时更改NavigationBar 的颜色。

Expo 发布了一个包 - expo-navigation-bar

只需安装它

expo install expo-navigation-bar

文档here中对用法进行了很好的解释

只需运行即可更改导航栏颜色，

NavigationBar.setBackgroundColorAsync("white");

Answer 7

我在整个论坛中尝试了许多答案，但找不到有效的解决方案。如果您使用最新的 RN 0.62 https://reactnative.dev/docs/navigation

您还可以设置标题背景而不是背景颜色。以下是我的代码：

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}