【ReactNative】モーダル画面（２）

f:id:memorude:20200728011118g:plain

rn-swipeable-panel

今度はSwipeablePanelを使って下からせり出してくるモーダル画面にします。ただ正確にはというか全然モーダル画面になりません。ただの選択画面です。下のタブも隠れません。 react-native-navigationでちゃんと設定して、多分タブナビゲーションと同じ階層に画面を作る必要があります。

github.com

使い方

isActiveプロパティをtrueにすると表示されます。高さがそのままだとヘッダーの裏に隠れるので、80%にしています。onlyLargeプロパティをtrueにしない場合、下まで自分でスワイプしないと半分の高さで一旦止まる動きになります。

import SwipeablePanel from 'rn-swipeable-panel';

let [showLogin, setShowLogin] = React.useState(false);

   <SwipeablePanel
      isActive={showLogin}
      showCloseButton={false}
      onlyLarge={true}
      style={{ height: '80%' }}
      barStyle={{ width: '30%' }}
      onClose={() => setShowLogin(false)}
    >
      <View>
        画面の中身
      </View>
    </SwipeablePanel>