Question

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

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

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

这样做有更好的模式吗？

Answer 1

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

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

// 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>
    );
  }
}

Answer 2

与上一个答案类似，将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

上的完整示例

在React Native

2 个答案: