浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】アプリにActionSheetを実装できるライブラリ「react-native-action-sheet」

タイトル通り、React Native のアプリに ActionSheet を実装したのでその手順についてまとめ。
React Native にも、ActionSheet を実装できる API はあるのですが、こちらは iOS のみでしか動作しないようなため、ライブラリを導入して実装することにしました。

GitHub のページはこちら。

GitHub – expo/react-native-action-sheet: A cross-platform ActionSheet for React Native
https://github.com/expo/react-native-action-sheet

 

ライブラリのインストールは下記のコマンドで行います。

npm install @expo/react-native-action-sheet --save

上記の実行が完了したら、アプリに実装していきます。

まず、アプリ全体<ActionSheetProvider /> で囲みます。
サンプルコードは下記のとおりです。

import { ActionSheetProvider } from '@expo/react-native-action-sheet'

class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <NavigationContainer>
          ...
        </NavigationContainer>
      </ActionSheetProvider>
    );
  }
}

こちらが完了したら、次に ActionSheet を表示したいコンポーネントに showActionSheetWithOptions を接続します。

import { connectActionSheet } from '@expo/react-native-action-sheet'

class ExamplePage extends React.Component {
  /* ... */
}

const ConnectedApp = connectActionSheet(ExamplePage)

export default ConnectedApp

接続する処理は、7行目で行っているのがそうです。
あとは、その接続した ConnectedApp をエクスポートします。

最後に、ActionSheet の項目や、各選択肢をタップされた時の処理を実装すれば完了です!

onOpenActionSheet() {
  const options = ['Delete', 'Save', 'Cancel'];
  const destructiveButtonIndex = 0;
  const cancelButtonIndex = 2;

  this.props.showActionSheetWithOptions(
    {
      options,
      cancelButtonIndex,
      destructiveButtonIndex,
    },
    buttonIndex => {
      // タップされた選択肢の index が返ります。
    },
  );
};

2行目の options で選択肢のラベルを設定しています。
3行目の destructiveButtonIndex には、削除などの赤く表示されてほしい項目のインデックスを指定します。
4行目の cancelButtonIndex には、キャンセルボタンのインデックスを指定します。
必要な項目は以上です。
そして、ActionSheet を表示する際には、ButtononPress 等に onOpenActionSheet() を実行すればOKです。

まだ、iOS でしか動作確認はしておりませんが、期待通りの表示になりました!
最初にアプリ全体を <ActionSheetProvider /> で囲ったりしなければいけないため、人によっては手間に感じてしまう人もいるかもしれませんが、とにかくシンプルで分かりやすいのでお勧めです。

 

以上、React Native でアプリに ActionSheet を追加できるライブラリ「react-native-action-sheet」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)