透過添加包裝器來響應本機風格的第三方組件

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. 任何「左側」樣式都是接受任何子項目的觸發器...現在不確定是否可以輕鬆地將其包裝到您自己的元件中...