探索React Native的新选择：Context Menu View

在React Native中，ContextMenuView是一个自定义组件，它允许用户为其子视图添加长按上下文菜单。以下是如何使用ContextMenuView的示例代码：

首先，你需要安装@react-native-community/viewpager库，因为ContextMenuView依赖于它。

npm install @react-native-community/viewpager

然后，你可以在你的React Native项目中导入并使用ContextMenuView。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ContextMenuView } from 'react-native-ios-context-menu';
 
const App = () => {
  return (
    <ContextMenuView>
      <View style={styles.item}>
        <Text>Item 1</Text>
      </View>
      <ContextMenuView.MenuOptions>
        <View style={styles.menuItem}>
          <Text onPress={() => alert('Copy pressed')}>Copy</Text>
        </View>
        <View style={styles.menuItem}>
          <Text onPress={() => alert('Delete pressed')}>Delete</Text>
        </View>
      </ContextMenuView.MenuOptions>
    </ContextMenuView>
  );
};
 
const styles = StyleSheet.create({
  item: {
    height: 50,
    backgroundColor: '#ffb6c1',
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuItem: {
    height: 50,
    backgroundColor: '#b0c4de',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;

在这个例子中，ContextMenuView包含一个子视图（在这里是一个简单的View）和一组上下文菜单选项（在ContextMenuView.MenuOptions中定义）。当用户长按主视图时，会出现带有"Copy"和"Delete"选项的上下文菜单。点击任何一个选项会弹出一个简单的警告框以响应点击事件。