在React Native中长按打开上下文菜单

Question

我希望使用React Native在长按不同位置触发上下文菜单.

即在像默认dailer的拨号器中.您可以长按任何联系人并获得"拷贝号"菜单.而且,一旦打开"联系卡",您就可以长按该人的姓名.

直接的方式需要大量的复制粘贴样板,包括组件和处理程序.

这样做有更好的模式吗？

Answer 1

与上一个答案类似，结合onLongPress弹出菜单的命令式控制 - 类似

      <TouchableWithoutFeedback onLongPress={()=>this.menu.open()}>
        <View style={styles.card}>
          <Text>My first contact name</Text>
          <Menu ref={c => (this.menu = c)}>
            <MenuTrigger text="..." />
            <MenuOptions>
               // ...
            </MenuOptions>
          </Menu>
        </View>
      </TouchableWithoutFeedback>

当涉及大量样板时 - 在 React 中，您可以制作自己的组件，您可以在任何地方重用，从而减少样板（以及复制和粘贴）

请参阅https://snack.expo.io/rJ5LBM-TZ 上的完整示例

Answer 2

所有可触摸组件(TouchableWithoutFeedback,TouchableOpacity等)都有一个名为的属性onLongPress.您可以使用此道具收听长按,然后显示上下文菜单.

为了消除代码混乱并进行大量复制粘贴,您可以将上下文菜单分离为不同的组件,并在长按时将其调用.您还可以使用ActionSheet库来显示所需的选项.React native有一个适用于iOS的本机API ActionSheetIOS.如果您在反应和反应原生方面获得更多经验,您可以为此创建更好的逻辑,但我将尝试在下面给您一个示例.

// file/that/contains/globally/used/functions.js

const openContextMenu = (event, user, callback) => {
  ActionSheetIOS.showActionSheetWithOptions({
    options: ['Copy Username', 'Call User', 'Add to favorites', 'Cancel'],
    cancelButtonIndex: [3],
    title: 'Hey',
    message : 'What do you want to do now?'
  }, (buttonIndexThatSelected) => {
    // Do something with result
    if(callback && typeof callback === 'function') callback();
  });
};

export openContextMenu;

import { openContextMenu } from './file/that/contains/globally/used/functions';

export default class UserCard extends React.Component {  
  render() {
    const { userObject } = this.props;
    return(
      <TouchableWithoutFeedback onLongPress={(event) => openContextMenu(event, userObject, () => console.log('Done')}>
        <TouchableWithoutFeedback onLongPress={(event) => openContextMenu(event, userObject, () => console.log('Done'))}>
          <Text>{userObject.name}</Text>
          <Image source={{uri: userObject.profilePic }}  />
        </TouchableWithoutFeedback>
      </TouchableWithoutFeedback>
    );
  }
}