Soalan saya:

Saya cuba menambah gaya saya sendiri pada komponen yang disediakan oleh react-native-popup-menu dan menambahkannya pada pustaka komponen saya. Mereka menyediakan komponen Menu, MenuOptions dan MenuOption dengan hierarki yang dijangkakan berikut:

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

Saya merancang untuk membuat pembungkus untuk setiap elemen, menggayakan komponen di dalamnya dan mengembalikan pembungkus apabila seseorang mengimportnya daripada pustaka komponen.

Sebagai contoh, pembalut untuk komponen menu:

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

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

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

Ini menambahkan pembungkus (elemen tambahan) pada setiap lapisan, menghasilkan hierarki berikut:

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

Pakej tidak menyukai ini kerana ia bergantung pada hierarki untuk memaparkan menu dengan betul. Melempar ralat "MenuOptions harus menjadi anak Menu"

Adakah terdapat cara untuk mencipta menu gaya tersuai dan mendedahkannya sebagai komponen dalam perpustakaan komponen? Jika ia bertindak balas, saya akan menulis semula kelas css, tetapi tiada kesan melata dalam react-native.

Sebarang petunjuk akan sangat membantu. Terima kasih.