Пользовательский стиль для MenuOption в родном всплывающем меню React

Так что я новичок в React (и в JavaScript тоже). Я создаю приложение, используя нативную реакцию, и в настоящее время пытаюсь создать свое всплывающее меню. (выглядит так: Изображение всплывающего меню)

Я хочу изменить стиль параметров (увеличьте размер шрифта и разместите их, а также измените цвет шрифта). Мой код выглядит примерно так:

<MenuProvider>
      <Menu >
        <MenuTrigger>
            <Image
              style={styles.menucontainer}
              resizeMode="contain"
              source={require('../assets/icon_more.png')}>
            </Image>
        </MenuTrigger>
        <MenuOptions optionsContainerStyle={styles.optionsstyle}>
          <MenuOption  text= 'About' />
          <MenuOption  text= 'Help & Feedback'/>
          <MenuOption  text= 'Sign Out'/>
        </MenuOptions>
      </Menu>
</MenuProvider>

После проверки https://github.com/instea/react-native-popup-menu/blob/master/src/MenuOption.js я нашел реквизит customStyles. Точно так же, как я передал объект стиля для MenuOptions в качестве реквизита optionContainerStyle, я попытался передать customStyles для MenuOption, но это привело к ошибке:

В этой среде источники для назначения ДОЛЖНЫ быть объектом. Эта ошибка связана с оптимизацией производительности и не соответствует спецификации.

Вот мой код стилей:

const styles = StyleSheet.create({
  optionsstyle:{
    marginTop:  height*32/dev_dimension.h,
    marginLeft: width*184/dev_dimension.w,
    backgroundColor: '#fafafa',
    width:  width*168/dev_dimension.w,
    height: height*160/dev_dimension.h,
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-between',
  },
});

Кто-нибудь может сказать, что я делаю неправильно?


person kdiv    schedule 27.06.2018    source источник


Ответы (1)


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

Дело в том, что customStyles — это карта стилей для разных частей. Что-то типа

<MenuOptions customStyles={{optionWrapper: { padding: 5}, optionText: styles.text}}>
person sodik    schedule 28.06.2018