浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-swipe-hidden-header」ライブラリ導入時のエラーの対処法

昨日投稿した「【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」ライブラリの中を見てみると、下記のような記述がありました。

import React, { PropTypes } from 'react';

エラーの原因はこれでした。
そのため、下記のように PropTypesreact からインポートするのではなく、prop-types からインポートするように書き換えます。

import React from 'react';
import PropTypes from 'prop-types';

なお、まだ prop-types をインストールしていない場合は、下記コマンドを実行してライブラリをインストールしてください。

npm install --save prop-types

修正する箇所は以上です。
が、ライブラリの中身を変えるのはどうなんでしょう…。

あとは、動作確認として GitHub のサンプルコードをそのまま転載し、アプリを実行したところ、下にスクロールするとヘッダーが非表示になるページを実装できました!

<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」ライブラリ導入時に発生したエラーの対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)