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

Posted 2023-04-18

【中文标题】使用 RN 和 expo 更改 android 上的导航栏？

【英文标题】：Change navigation bar on android with RN with expo?

【发布时间】：2019-11-05 20:24:35

【问题描述】：

我开始在 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);

【问题讨论】：

你安装了'react-native-navigation-bar-color'吗？

你导入changeNavigationBarColor from 'react-native-navigation-bar-color'了吗？

是的，react-native-navigation-bar-color 已安装、链接和导入

【参考方案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

【讨论】：

是的，这有帮助，但我们仍然无法在应用程序运行时使其透明或更改选项。

此时要获得更多控制权，您需要弹出 (docs.expo.io/versions/v35.0.0/workflow/customizing) 才能链接原生模块，如 react-native-navigation-bar-color。您将无法使用需要在 expo 中链接的任何模块。您也可以在此处申请该功能expo.canny.io/feature-requests

【参考方案2】：

您是否安装了“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';

或

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

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

【讨论】：

是的，react-native-navigation-bar-color 已安装、链接和导入。我尝试将颜色更改为“#ffffff”，但仍然出现同样的错误

@WojciechBorowski 更新了我的答案。你可以试试我的答案代码

异步null is not an object (evaluating 'NavigationBarColor.changeNavigationBarColor') - node_modules/react-native-navigation-bar-color/src/index.js:8:23 in changeNavigationBarColor同样的问题

你能试试这个吗？从 'react-native-navigation-bar-color' 导入 changeNavigationBarColor ;

可能是因为我使用 Expo Managed Workflow？

【参考方案3】：

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

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

我已经吸取了教训。

【参考方案4】：

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

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

【参考方案5】：

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

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

所以我切换到这个：

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

然后它起作用了。

【参考方案6】：

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

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

只需安装它

expo install expo-navigation-bar

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

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

NavigationBar.setBackgroundColorAsync("white");

【参考方案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>
  );

【讨论】：

OP 询问的是 Android 上的底部导航栏，RN 上使用 Expo。

我不知道可能是后来编辑的原始问题还是添加了屏幕截图。同样在堆栈溢出时，他们没有勺子喂食，我告诉用户如何更改导航栏，他可以使用类似的方法来解决他的问题。谢谢。