Панель инструментов Android NavIcon не отображается - PullRequest
Новая
       10

Панель инструментов Android NavIcon не отображается

0 голосов
/ 31 мая 2018

Я пытаюсь отобразить панель инструментов Android со значком гамбургера.Я использую код: 

_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:

Похоже, что-то здесь с нашей системой сборки (которая использует тот же стек, что и наша веб-сборка)система, а не обычные инструменты RN) загружает файлы как данные другого типа - загружает их как данные.Я не уверен, что они обычно.Но когда ToolbarAndroid передается URI, он предполагает, что это будет файл, URL-адрес http / https или имя рисованного объекта в нашей папке Drawable.Похоже, нам понадобится отладить нашу систему сборки или жестко запрограммировать этот образ (который является значком гамбургера - это не конец света).

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Этот код (ES6) работает в моем приложении: 

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

Файл navIcon:

enter image description here

0 голосов
/ 31 мая 2018

Кажется, что формат navIcon специфичен:

Значки панели действий должны быть 32-битными PNG с альфа-каналом для прозрачности.Размеры готовых значков панели действий, соответствующие заданной обобщенной плотности экрана, показаны в таблице ниже.

18 x 18 px
24 x 24 px
36 x 36 px
48x 48 px

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

Также вы можете использовать Icon.ToolbarAndroid из response-native-vector-icons: https://github.com/oblador/react-native-vector-icons

...