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

Question

所以我是 React 的新手（就此而言 JavaScript 也是）。我正在使用本机反应创建一个应用程序，目前正在尝试设置我的弹出菜单的样式。（看起来像这样：Popup menu image）

我想更改选项的样式（增大字体大小，space 并更改字体颜色）。我的代码看起来像这样：

<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 但产生了错误：

In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

这是我的样式代码：

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 the optionsContainerStyle are deprecated and I am not sure if they work properly. Try to use customStyles props instead as seen in StylingExample 你可以找到完整示例的地方。

关键是 customStyles 是不同部分的样式映射。像

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

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

Custom styling for MenuOption in React native popup menu

javascript

reactjs

react-native

react-proptypes

react-native-popup-menu