在react-native-side-menu中突出显示所查看组件上的菜单项

npm install react-native-side-menu --save

import SideMenu from 'react-native-side-menu';

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const Menu = ({ onSelect }) => {
  return (
    <View>
      <TouchableOpacity onPress={() => onSelect('Item 1')}>
        <Text>Item 1</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onSelect('Item 2')}>
        <Text>Item 2</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onSelect('Item 3')}>
        <Text>Item 3</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Menu;

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import SideMenu from 'react-native-side-menu';
import Menu from './Menu';

const MainScreen = () => {
  const [isOpen, setIsOpen] = useState(false);
  const onSelectMenuItem = (item) => {
    console.log('Selected item:', item);
    // 在这里可以根据选中的菜单项执行相应的操作
  };

  return (
    <SideMenu
      menu={<Menu onSelect={onSelectMenuItem} />}
      isOpen={isOpen}
      onChange={(open) => setIsOpen(open)}
    >
      <View>
        <Text>主要内容</Text>
      </View>
    </SideMenu>
  );
};

export default MainScreen;