1

所以我是 React 的新手（和 JavaScript 也是如此）。我正在使用 react native 创建一个应用程序，目前正在尝试设置我的弹出菜单的样式。（看起来像这样：弹出菜单图像）

我想更改选项的样式（使字体大小更大并将它们分开并更改字体颜色）。我的代码看起来像这样：

<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后 ，我找到了一个 prop customStyles。就像我为MenuOptionsas prop传递了一个样式对象一样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',
  },
});

谁能告诉我做错了什么？

4

1 回答 1

2

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

问题是 customStyles 是不同部分的样式映射。就像是

<MenuOptions customStyles={{optionWrapper: { padding: 5}, optionText: styles.text}}>
于 2018-06-28T20:30:25.170 回答