Googleマップアプリのスワイプパネルを再現する「rn-swipeable-panel」を紹介

Googleマップアプリを起動するとスクリーン下部にスワイプパネルの存在に気づく。ここには、対象エリアのスポット情報を案内されている。おもにグルメ種がカテゴライズされていて、パネル内の操作で事足りる場合もある。

このようにスクリーン上の情報に関連したことを表示させるには、優れたUIになり得るスワイプパネルだが、スクラッチで実装となると<Animated.View />等の制御に加え、各種イベント処理を書かねばならない。きっと面倒くさいことになるはずだ。

Googleマップアプリのスワイプパネル風にしたい場合に、快適な手段がある。

このエントリーでは、スクリーン下部から現れるスワイプパネル実装の「rn-swipeable-panel」を紹介したい。

rn-swipeable-panel について

rn-swipeable-panelは、React Nativeアプリに実装できるぼボトムパネルコンポーネントだ。スクリーン下部に現れた後、上に引き伸ばしたり押し下げたり閉じたりできる。

特徴

  • Googleマップアプリのスポット情報パネルっぽいことができる
  • モーダルUIの代替としても可

インストール

$ npm install rn-swipeable-panel --save
# or
$ yarn add rn-swipeable-panel

インポート

import SwipeablePanel from 'rn-swipeable-panel';

設定

props nametypedefaulthint
isActiveboolfalseパネルの表示/非表示
onCloseFunctionパネルが閉じたとき発火
showCloseButtonbool閉じるボタンを表示するか否か
fullWidthboolfalseフルサイズにするか否か
openLargeboolfalseデフォルトで大きく開くか否か
onlyLargeboolfalse大きく開くのみにするか否か
noBackgroundOpacityboolfalse不透明度を無効にするか否か
styleObject{}パネルのスタイルをオーバーライドする
closeRootStyleObject{}閉じるボタンのベーススタイルをオーバーライドする
closeIconStyleObject{}閉じるボタンのアイコンのスタイルをオーバーライドする
closeOnTouchOutsideboolfalseパネル外をタッチして閉じるか否か
noBarboolfalseパネル上部のラインを消すか否か

デモンストレーション

import React from 'react';
import { StyleSheet, View } from 'react-native';
​
import SwipeablePanel from 'rn-swipeable-panel';
​
class App extends React.Component {
​
  constructor (props) {
    super(props);
    this.state = {
      swipeablePanelHoge: true,
      swipeablePanelActive: false
    };
    this.openPanel = this.openPanel.bind(this);
    this.closePanel = this.closePanel.bind(this);
  }
​
  componentDidMount () {
    this.openPanel();
  }
​
  openPanel () {
    this.setState({ swipeablePanelActive: true });
  }
​
  closePanel () {
    this.setState({ swipeablePanelActive: false });
  }
​
  render () {
    return (
      <View style={styles.container}>
        <SwipeablePanel
          fullWidth
          isActive={this.state.swipeablePanelActive}
          onClose={this.closePanel} />
      </View>
    );
  }
}
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});
​
export default App;

まとめ

Googleマップアプリ風のボトムパネル実装する「rn-swipeable-panel」の紹介だった。

デモンストレーションのソースコードをご覧のとおり、別段、複雑さは一切ないと理解してもらえたのではないだろうか。本来ならば、SwipeablePanelに子要素で任意コンテンツを配置して使う。<SwipeablePanel />じゃなくて、<SwipeablePanel>...</SwipeablePanel>だ。Googleマップアプリのスポット情報パネルっぽいことを求めていたならば最適なコンポーネントになることだろう。そしてオーバーレイ(半透明)フィールドを有していることから、モーダルの代替コンテンツとしても活用可能だろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。