モーダルを出さずにくるくる回して設定する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
サンプルがないのでソースを見つつデモ画像に近づけてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ScrollPicker dataSource={["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]} selectedIndex={5} itemHeight={50} wrapperHeight={137.5} renderItem={(data, index, isSelected) => { return ( <View style={{ width: 50, alignItems: "center" }}> <Text style={isSelected ? { color: "#333" } : { color: "#bbb" }}>{data}</Text> </View> ); }} onValueChange={(data, selectedIndex) => { console.log(`dataSource[${selectedIndex}] = ${data}`); }} /> |
選択された数値もちゃんと取れてます。
フォントサイズをいじったらもっとスクロールっぽくなるかも。
追記
スクロール要素が100くらいから表示が遅くなる。
10くらいにしておくほうが良いかも。
さらに追記
wrapperColorとかが効いてないなーと思ってソースを見てみたら公開バージョンでなかった。yarn upgradeしたらちゃんと動きました。
欲しかったヤツです！
ありがとうございます！
wrapperHeightが効かなくないですか？
どうやってupgradeするんでしょうか！
連投すみません。
wrapperHeightの意味を勘違いしていたようです。要素の数によって手動でいい感じに設定する必要があるんですね。。。
初心者には難しい。。