Question

我试图用汉堡图标显示ToolbarAndroid。我正在考虑代码：

_buildToolbar (msg) {
    const navIcon = require("../../icons/menu.png");
    return (
        <ToolbarAndroid
            title={msg}
            style={{
                height: 56,
                alignSelf: "stretch",
            }}
            onIconClicked={this.props.openDrawer}
            navIcon={navIcon}
        />);
}

工具栏显示，但导航图标不显示。我收到警告Failed prop type: Invalid prop navIcon supplied to ToolbarAndroid。该文件确实存在，并且在调试器下查看navIcon已定义。在这里寻求任何帮助。使用基于图标的工具栏可能不是一个可行的解决方案，因为我们的一些自定义功能会使得正确的字体变得困难。

编辑：

更改为：

        <ToolbarAndroid
            title={msg}
            style={{
                height: 56,
                alignSelf: "stretch",
            }}
            onIconClicked={this.props.openDrawer}
            navIcon={
                { uri: navIcon }}
        />);

摆脱了警告，但没有解决显示问题。

EDIT2：

这里看起来像我们的构建系统（它使用与我们的Web构建系统相同的堆栈，而不是普通的RN工具）将文件作为不同的数据类型加载 - 它将它们作为数据uris加载。我不确定他们通常是什么。但是当ToolbarAndroid传递给uri时，它假定它将是一个文件，一个http / https url，或者我们的drawable文件夹中的drawable名称。所以看起来我们需要调试我们的构建系统，或硬编码这个图像（这是一个汉堡包图标不是世界末日）。

Answer 1

navIcon格式似乎具体：

操作栏图标应为32位PNG，并带有透明的Alpha通道。完成的操作栏图标尺寸（对应于给定的通用屏幕密度）显示在下表中。

18 x 18 px
  24 x 24像素
  36 x 36像素
  48 x 48 px

https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar

此外，您可以使用react-native-vector-icons中的Icon.ToolbarAndroid： https://github.com/oblador/react-native-vector-icons

Answer 2

此（ES6）代码适用于我的应用：

import navIcon from '../Images/navIcon.png'
...
<ToolbarAndroid
    title={'test'}
    style={{
      height: 56,
      alignSelf: 'stretch',
    }}
    onIconClicked={this.props.openDrawer}
    navIcon={navIcon}
/>

navIcon文件：

ToolbarAndroid navIcon无法显示

2 个答案: