React Native, ExpoでドラムロールUI入力


モーダルを出さずにくるくる回して設定するUIをExpoで使いたい。

マザー2の影響かドラムロールUIって言ってしまいますが、一般的にはwheelらしいです。spinnerって言ってるのもありましたが、これは他にも色んな意味を指しすぎなので使いにくい(ローディング、時計など円状のUI、数値入力の横の▲▼など)。

 

🔗https://github.com/search?q=react-native+wheel

Githubで適当なワードで検索してみましたが望むものは見当たらなかったです。

 

🔗https://www.npmjs.com/package/react-native-wheel-picker-android

人気があるけどgithubしか見ていなかったので見つけるのが遅れた。

yarn add react-native-wheel-picker-androidだけで使えるように見えたので使ってみた。

Invariant Violation: Invariant Violation: requireNativeComponent: “WheelPicker” was not found in the UIManager.

ネイティブ機能のリンクが必要みたいですね。Expo Managedでいたいのでパス。

 

大体ネイティブコードを使っていてUnityでやったようにスクロールを使って自作するしかないかなと思っていたら同じような考えのものを見つけました。

🔗https://github.com/veizz/react-native-picker-scrollview

 

サンプルがないのでソースを見つつデモ画像に近づけてみます。

選択された数値もちゃんと取れてます。

フォントサイズをいじったらもっとスクロールっぽくなるかも。

追記

スクロール要素が100くらいから表示が遅くなる。

10くらいにしておくほうが良いかも。

さらに追記

wrapperColorとかが効いてないなーと思ってソースを見てみたら公開バージョンでなかった。yarn upgradeしたらちゃんと動きました。

3 thoughts on “React Native, ExpoでドラムロールUI入力”

  1. 連投すみません。
    wrapperHeightの意味を勘違いしていたようです。要素の数によって手動でいい感じに設定する必要があるんですね。。。
    初心者には難しい。。

コメントを残す

メールアドレスが公開されることはありません。