昨日投稿した「【React Native】「react-native-swipe-hidden-header」ライブラリの「Unable to resolve module AccessibilityInfo」エラーの対処法【未解決】」という記事の続編です。
上記の記事で、「Unable to resolve module AccessibilityInfo」は解消したものの、また別のエラーが発生した、と書きましたが、進展があったのでまとめ。
なお、ライブラリの GitHub はこちら。
fengliu222/react-native-swipe-hidden-header: A react native component that can hide navigator bar when user swipe list.
https://github.com/fengliu222/react-native-swipe-hidden-header
発生していたエラーは「TypeError: Cannot read property ‘func’ of undefined, js engine: hermes」です。
こちらのエラーメッセージを検索したところ、PropTypes のエラーであることが分かりました。
参考にさせていただいた記事はこちら。
障害メモ/PropTypes.funcが見つからない – ポケットがチケットでいっぱい（アーカイブ）
https://fukuchiharuki.me/static/pukiwikidump/page/障害メモ/PropTypes.funcが見つからない.html
上記の記事によると、React.PropTypes が非推奨になったため、prop-types を使うように修正する必要があるとのこと。
「react-native-swipe-hidden-header」ライブラリの中を見てみると、下記のような記述がありました。
1 | import React, { PropTypes } from 'react'; |
エラーの原因はこれでした。
そのため、下記のように PropTypes を react からインポートするのではなく、prop-types からインポートするように書き換えます。
1 2 | import React from 'react';import PropTypes from 'prop-types'; |
なお、まだ prop-types をインストールしていない場合は、下記コマンドを実行してライブラリをインストールしてください。
1 | npm install --save prop-types |
修正する箇所は以上です。
が、ライブラリの中身を変えるのはどうなんでしょう…。
あとは、動作確認として GitHub のサンプルコードをそのまま転載し、アプリを実行したところ、下にスクロールするとヘッダーが非表示になるページを実装できました！
1 2 3 4 5 6 7 | <SwipeHiddenHeader header={()=> <View style={styles.header}><Text style={styles.headerText}>Custom</Text></View>} renderScrollComponent={()=> <FlatList data={[{key: 'a'},{key: '2'},{key: '2a'},{key: '3a'},{key: 'a4'},{key: 'a1'}, {key: 'b'}, {key: 'b2'}, {key: 'b3'}, {key: 'b1'}]} renderItem={(item)=> <TouchableOpacity onPress={()=> props.changeType('normal')} style={styles.block}><Text>Tap here to Custom list view</Text></TouchableOpacity>} />}></SwipeHiddenHeader> |
しかし、上記のコードから現在開発中のアプリのデータと見た目に合わせようと書き換えたところ、ヘッダーが非表示になる機能が動作しなくなりました…。
これはおそらく、実装したいページがヘッダーと FlatList だけではなく、他にもダイアログなどを表示していて、サンプルコードよりも複雑なページだったためと思われます。
その後も色々いじってみましたが、結局ちゃんと動作しませんでした…。
ということで、こちらのライブラリの導入は、本格的に見合わせることにしました。
……個人的には、ここまで分かったので、むしろ諦めがつきました。
調べてみたところ、このライブラリを使わずに実装している記事も見つけたので、そちらを参考にしてもいいかもしれません。
とにかく、これ以外のライブラリまたはサンプルコードがないか、調べてみたいと思います。
以上、React Native の「react-native-swipe-hidden-header」ライブラリ導入時に発生したエラーの対処方法についてでした。
ご参考になれば幸いです。
