React Nativeの長押し時のコンテキストメニューの表示

Question

React Nativeを使用して、長押しの別の場所でコンテキストメニューを表示させたいと思います。

I.e.デフォルトのデイラーのようなダイヤラーで連絡先を長押しすると、「コピー番号」メニューが表示されます。また、「連絡先カード」を開いたら、その人物の名前を長くクリックすることもできます。

ストレートフォワードの方法では、コンポーネントとハンドラの両方をコピーペーストしたボイラープレートが必要です。

これを行うためのより良いパターンはありますか？

Answer 1

すべてのタッチ可能なコンポーネント（TouchableWithoutFeedback、TouchableOpacityなど）には、onLongPressというプロパティがあります。この小道具を使用して長押しを聞いて、コンテキストメニューを表示することができます。

コードの混乱を避け、多くのコピーを貼り付けるには、コンテキストメニューを別のコンポーネントとして分けて、長押しが起きたときに呼び出すことができます。また、ActionSheetライブラリを使用して、必要なオプションを表示することもできます。 React nativeには、ActionSheetIOSというiOS向けのネイティブAPIがあります。あなたが反応と反応のネイティブでもう少し経験を積むなら、あなたはこれに対してより良い論理を作り出すことができますが、私はあなたに以下の例を与えるつもりです。ただ、ポップアップメニューのための不可欠コントロールで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-native-popup-menuため - 前回の答えとして同様

// 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

あなたはどこでも再利用できるので、定型文を減らすことができます（そしてコピー&ペースト）

例をすべてhttps://snack.expo.io/rJ5LBM-TZ