探索React Native iOS上下文菜单库：react-native-ios-context-menu

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ContextMenu from 'react-native-ios-context-menu';
 
const App = () => {
  return (
    <ContextMenu ref={contextMenuRef}>
      <View style={styles.container}>
        <Text onContextMenu={onContextMenu}>右键点击这里显示上下文菜单</Text>
      </View>
    </ContextMenu>
  );
};
 
const contextMenuRef = React.createRef();
 
const onContextMenu = (event) => {
  contextMenuRef.current.show({
    items: [{
      title: '分享',
      onPress: () => console.log('分享菜单被点击')
    }, {
      title: '删除',
      onPress: () => console.log('删除菜单被点击'),
      destructive: true // 红色字体表示破坏性操作
    }],
    // 可选项: 设置菜单出现的位置
    anchor: {
      x: event.nativeEvent.pageX,
      y: event.nativeEvent.pageY
    }
  });
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
 
export default App;

这段代码展示了如何在React Native应用中使用react-native-ios-context-menu库来添加iOS风格的上下文菜单。首先创建了一个ContextMenu组件的引用，并定义了一个onContextMenu事件处理函数，该函数在用户右键点击文本时被触发，并显示了一个包含两个菜单项的上下文菜单。