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

【问题标题】：Custom styling for MenuOption in React native popup menuReact 本机弹出菜单中 MenuOption 的自定义样式
【发布时间】：2018-06-27 18:08:20
【问题描述】：

所以我是 React 的新手（和 JavaScript 也是如此）。我正在使用 react native 创建一个应用程序，目前正在尝试设置我的弹出菜单的样式。（看起来像这样：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 传递一样，我尝试将customStyles 传递给MenuOption，但这会产生错误：

在这种环境中，assign 的来源必须是一个对象。此错误是性能优化，不符合规范。

这是我的样式代码：

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

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

【问题讨论】：

标签： javascript reactjs react-native react-proptypes react-native-popup-menu

【解决方案1】：

根据documentation，optionsContainerStyle 已被弃用，我不确定它们是否正常工作。尝试使用customStyles 道具，如StylingExample 中所示，您可以在其中找到完整示例。

问题是 customStyles 是不同部分的样式映射。类似的东西

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

【讨论】：