通过添加包装器来响应本机风格的第三方组件

Question

我的问题：

我正在尝试将自己的样式添加到react-native-popup-menu提供的组件中，并将其添加到我的组件库中。它们提供具有以下预期层次结构的 Menu、MenuOptions 和 MenuOption 组件：

<Menu>
  <MenuOptions>
    <MenuOption text="A">
    </MenuOption>
    <MenuOption text="B">
    </MenuOption>
  </MenuOptions>
</Menu>

我计划为每个元素创建包装器，在其中设置组件的样式，并在有人从组件库导入它时返回包装器。

例如，菜单组件的包装器：

import { MenuProps } from 'react-native-popup-menu';

type CustomMenuProps = {
  children: React.ReactElement[];
}

const CustomMenu = (props: MenuProps && CustomMenuProps) => {
  return <Menu style={{...someCustomStyle}}>{children}</Menu>
}

这会在每一层上添加包装器（一个额外的元素），从而产生以下层次结构：

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>...

该包不喜欢这样，因为它依赖于层次结构来正确显示菜单。抛出错误“MenuOptions 应该是 Menu 的子级”

有没有办法创建自定义样式的菜单并将其公开为组件库中的组件？如果是react，我会重写css类，但是react-native中没有级联效果。

任何线索都会非常有帮助。谢谢。

Answer 1

我不确定到底是什么问题 - 所以我只是在此处添加一些可能对您有帮助的提示/线索。

查看文档 https:// github.com/instea/react-native-popup-menu/blob/master/doc/extensions.md 和相应的 示例

从中我看到您可以执行/使用以下操作：

1. MenuOptions 的样式是原生支持的，没有任何问题

const CheckedOption = (props) => (
      <MenuOption value={props.value} text={'\u2713 ' + props.text} />
    )

2. 选项容器的自定义样式似乎也可以

<菜单渲染器={RoundedContextMenu}>

你只需要一点样板文件（参见示例） - 我想将其包装到自定义组件中不是问题

3. 任何“左侧”样式都是接受任何子项的触发器...现在不确定是否可以轻松地将其包装到您自己的组件中...