Пользовательский стиль для MenuOption в собственном всплывающем меню React - PullRequest
Новая
       25

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

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

Так что я новичок в 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 как prop 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',
  },
});

Может кто-нибудь сказать, что я делаю не так?

1 Ответ

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

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

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

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