首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用RN和expo更改android上的导航栏?

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

Stack Overflow用户
提问于 2019-06-24 11:49:35
回答 5查看 7.7K关注 0票数 6

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

我试着用

https://github.com/thebylito/react-native-navigation-bar-color#readme

但它会打印出以下错误:

TypeError: TypeError: null不是对象(计算null

代码语言:javascript
运行
复制
if (Platform.OS == 'android') {
  changeNavigationBarColor('#f00', true);
}
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-11-03 07:21:23

这项功能已于8月9日并入世博会。您需要将这些指令添加到app.json

代码语言:javascript
运行
复制
{
  "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

票数 3
EN

Stack Overflow用户

发布于 2019-06-24 12:35:10

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

如果不是

你是不是从“react-native- changeNavigationBarColor -bar-color”导入的?

如果不是

或者

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

代码语言:javascript
运行
复制
white : "#ffffff" , black : "#000000"

使用reac-native-navigation bar-color:

代码语言:javascript
运行
复制
example = async () => {
      try{
        if (Platform.OS == 'android') {
          const response = await changeNavigationBarColor('#ffffff');
          console.log(response)// {success: true}
          }
      }catch(e){
          console.log(e)// {success: false}
      }

  };
...
 {
            this.example();
          }}
        />


IF not I suggest you try another module. 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
票数 0
EN

Stack Overflow用户

发布于 2019-09-05 06:49:13

此模块不适用于世博会。请确保您已经检查了

阅读我

要随Expo一起安装的任何模块的文件。

如果您看到安装步骤需要‘

react-本机链接模块名称

‘那么很可能

它不会起作用的

除非它已经包含在/预先打包在您拥有的Expo SDK版本中,否则它将与Expo一起使用。

我已经以艰难的方式吸取了教训。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56729621

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档