3

我想使用 React Native 在长按不同的地方触发上下文菜单。

即在像默认拨号器一样的拨号器中。您可以长按任何联系人并获得“副本号码”菜单。您还可以在打开他们的“联系人卡片”后长按此人的姓名。

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

这样做有更好的模式吗？

4

2 回答 2

7

所有可触摸组件（TouchableWithoutFeedback、TouchableOpacity 等）都有一个名为onLongPress. 你可以使用这个道具来监听长按，然后显示上下文菜单。

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

// 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>
    );
  }
}
于 2017-10-14T13:25:24.403 回答
7

与前面的答案类似，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上的完整示例

于 2017-10-15T17:07:45.433 回答