React Native第三方组件样式定制：避免层级冲突的策略

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>
        {/* ... */}
      </MenuOptions>
    </CustomMenuOptions>
  </Menu>
</CustomMenu>

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';

const CustomStyledMenuOption = () => (
  <MenuProvider>
    <Menu>
      <MenuTrigger text="打开菜单" />
      <MenuOptions>
        <MenuOption
          onSelect={() => alert('选择 A')}
          text="选项 A"
          style={styles.menuOptionStyle} // 直接应用样式
          textStyle={styles.menuOptionTextStyle} // 文本样式
        />
        <MenuOption
          onSelect={() => alert('选择 B')}
          text="选项 B"
          style={[styles.menuOptionStyle, { backgroundColor: '#e0f7fa' }]}
        />
      </MenuOptions>
    </Menu>
  </MenuProvider>
);

const styles = StyleSheet.create({
  menuOptionStyle: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  menuOptionTextStyle: {
    fontSize: 16,
    color: '#333',
  },
});

export default CustomStyledMenuOption;

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Menu, MenuOptions, MenuOption, MenuTrigger, MenuProvider } from 'react-native-popup-menu';

// 自定义菜单容器渲染器
const CustomMenuRenderer = ({ children, style, ...otherProps }) => {
  return (
    <View style={[styles.customMenuContainer, style]} {...otherProps}>
      {children}
    </View>
  );
};

const CustomStyledMenu = () => (
  <MenuProvider>
    <Menu renderer={CustomMenuRenderer}> {/* 使用自定义渲染器 */}
      <MenuTrigger text="打开自定义菜单" />
      <MenuOptions>
        <MenuOption onSelect={() => alert('选项 1')} text="菜单选项 1" />
        <MenuOption onSelect={() => alert('选项 2')} text="菜单选项 2" />
      </MenuOptions>
    </Menu>
  </MenuProvider>
);

const styles = StyleSheet.create({
  customMenuContainer: {
    backgroundColor: 'white',
    borderRadius: 8,
    overflow: 'hidden', // 确保内容不超出圆角
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    // 其他样式，如内边距等，根据需要添加
  },
});

export default CustomStyledMenu;

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { Menu, MenuOptions, MenuOption, MenuTrigger, MenuProvider } from 'react-native-popup-menu';

const CustomTriggerMenu = () => (
  <MenuProvider>
    <Menu>
      <MenuTrigger>
        <TouchableOpacity style={styles.customTrigger}>
          <Text style={styles.triggerText}>点击我</Text>
        </TouchableOpacity>
      </MenuTrigger>
      <MenuOptions>
        <MenuOption onSelect={() => alert('你好')} text="Say Hello" />
        <MenuOption onSelect={() => alert('再见')} text="Say Goodbye" />
      </MenuOptions>
    </Menu>
  </MenuProvider>
);

const styles = StyleSheet.create({
  customTrigger: {
    backgroundColor: '#6200ee',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  triggerText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default CustomTriggerMenu;