Как включить пункты меню с пользовательскими значками?

В документации для всплывающего меню реакции на собственное всплывающее меню упоминается, как создавать параметры меню с галочкой.

const CheckedOption = (реквизит) => ( )

Я хочу создать пункты меню с пользовательскими значками. У меня нет значения Unicode для этих значков. Я создал собственный компонент MenuOptionWithIcon и обернул значок и пункт меню внутри представления.

export class MenuOptionWithIcon
    extends React.Component<IMenuOptionProps, {}> {

    public static defaultProps: Partial<IMenuOptionProps> = {
        disabled: false,
    };

    public render() {
        return (
            <View style={PopupMenuStyleSheet.menuOptionWithIcon}>
                {this.props.icon}
                <MenuOption
                    {...this.props}
                    text={this.props.text}
                    onSelect={this.props.onSelect}
                    disabled={this.props.disabled}
                />
            </View>
        );
    }
}

Но теперь я не могу применить customStyles к этим параметрам. Я хочу увеличить заполнение каждого из этих параметров, чтобы увеличить цель касания. Это правильный способ создать пользовательский пункт меню со значком? Или есть способ получить значения юникода для нужных мне значков? Спасибо!

ИЗМЕНИТЬ:

Основываясь на предложении в ответе ниже, я сделал следующее, но теперь вижу только текст в своем меню. Я не вижу отображаемого значка. onSelect работает, текст отображается, но значок не отображается.

const IconOption = (props) => (
  <MenuOption {...props}>
     <Icon name={props.iconName} size={30} />
     {props.children}
  </MenuOption>
);

<MenuOptions customStyles={MenuOptionStyles}>
   <IconOption
       iconName='md-bookmark'
       onSelect={this.onSelectSave.bind(this)}
       text={MenuOptionStrings.Save}
   />
</MenuOptions>

react-native unicode react-native-popup-menu
person nataroo    schedule 19.05.2017    source источник
comment
На самом деле я нашел юникоды для иконок, которые я ищу здесь fontello.github.io/entypo/demo .html. Но когда я включаю их вместе с текстом, я получаю несколько случайных изображений. Может ли это означать, что некоторые шрифты не поддерживаются?   -  person nataroo    schedule 20.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

для значков вам нужен специальный шрифт - используйте, например. react-native-vector-icons, а затем используйте тот же подход, что и для CheckedOption:

const IconOption = ({iconName, text, ...others}) => (
  <MenuOption {...others} >
    <Text>
      <Icon name={iconName} />
      {' ' + text}
    </Text>
  </MenuOption>
)
person sodik    schedule 20.05.2017
comment
Я объявил IconOption так же, как в вашем ответе, и включил его в MenuOptions. ‹MenuOptions› ‹IconOption iconName='bookmark' text='Bookmark' onSelect={this.onSelectBookmark.bind(this)} /› ‹/MenuOptions›. Но я получаю сообщение об ошибке компиляции: класс элементов JSX не поддерживает атрибуты, потому что у него нет свойства props. Что я делаю не так? - person nataroo; 22.05.2017
comment
Я исправил эту проблему, это была проблема с кронштейном. Я отредактировал исходный вопрос с тем, что я вижу с вашим ответом. @sodik Пожалуйста, дайте мне знать, как с этим справиться! - person nataroo; 23.05.2017