Question

因此，我是React的新手（对于JavaScript也是如此）。我正在使用本机反应创建应用程序，当前正在尝试设置弹出菜单的样式。（看起来像这样：Popup menu image）

我想更改选项的样式（使字体更大，将它们隔开并改变字体颜色）。我的代码如下所示：

<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的样式对象一样，我尝试为MenuOption传递了customStyles，但是产生了一个错误：

在这种环境下，分配源必须是一个对象。该错误是性能优化，不符合规范。

这是我的样式代码：

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',
  },
});

谁能告诉我我在做什么错？

Answer 1

根据documentation，optionsContainerStyle已过时，我不确定它们是否可以正常工作。尝试使用StylingExample中的customStyles道具，在那里您可以找到完整的示例。

问题在于customStyles是不同部分的样式图。像

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

React本机弹出菜单中MenuOption的自定义样式

1 个答案: