Question

我开始将React Native与Expo一起使用，但遇到了第一个问题，我不知道该如何处理。我想将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

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

如果不是

npm install react-native-navigation-bar-color --save
react-native link react-native-navigation-bar-color

和

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

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

OR

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

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

npm install --save react-native-navbar-color
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 2

此模块不适用于Expo。确保为要与Expo一起安装的任何模块签出自述文件文件。

如果您看到安装步骤需要“ 本机链接模块名称”，则很可能它将无法与Expo一起使用，除非已经包含/预安装了-打包在您拥有的Expo SDK版本中。

我已经很努力地学习了课程。

Answer 3

此功能于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 4

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

，则对您有用

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

export default function App() {

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

Answer 5

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

并且您可以将 this 答案应用到您的案例中。

Answer 6

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

deploy:
 stage: deploy
 only:
  - dev
  - master
 script:
  - dotnet build -c Release
  - dotnet publish -c Release

所以我切换到这个：

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

然后就成功了。

在带有exp的RN的Android上更改导航栏吗？

6 个答案: