React Nativeで動的にナビゲーションヘッダー文言を設定する方法

実現コード const navigation = useNavigation(); useLayoutEffect(() => { if (response && navigation) { navigation.setOptions({ title: `${response}`, }); } }, [navigation, response]); useLayoutEffectって? 実装していて、useLayoutEffectっていうhooksが聞き覚えなさ過ぎて、react native専用のhooksだと思っていたけど、調べるとreactが用意しているhooksらしい。 useLayoutEffect useLayoutEffect は useEffect の一種ですが、ブラウザが画面を再描画する前に実行されます。 とのことで、さらに、 useLayoutEffect はパフォーマンスを低下させる可能性があります。可能な限り useEffect を使用することを推奨します。 とのことだった。できる限り使わないでほしいとのことなので知らなくても無理はなかったかもしれない。 今回は、useLayoutEffectを使用することで、タイトルが描画される前に処理が実行されるため、新しいタイトルが即座に反映されるようになっている。 ただこのコードだと、responseが取得されるまでは元のタイトルが表示されるので、responseがfalseの時の条件を付与する必要があるということにいまさら気が付いた。

投稿日 · 2025-01-16 · 更新日 · 2025-01-16 · 1 分 · nove-b

React Nativeで無限スクロールのタイムラインを作成した

Mastodonのクライアントアプリを作るうえで最もコアな機能であるタイムラインを作成した。 無限スクロールを実装するためにいろいろと調べたりしたのでまとめておく。 FlatListが優秀 FlatList 完全なクロスプラットフォーム。 オプションの水平モード。 設定可能なビューアビリティ コールバック。 ヘッダーのサポート。 フッターのサポート。 セパレーターのサポート。 引っ張って更新します。 スクロールの読み込み。 ScrollToIndex のサポート。 複数列のサポート。 という多くの機能をサポートしているリストコンポーネント。 今回はタイムラインの無限スクロールを実現したいということで、 リストを引っ張り更新 リストのそこについたら再フェッチ 上記2つが実現できればいい。 そしてその2つはFlatListに標準搭載されている。 リストを引っ張り更新 onRefresh というPropsが用意されている。 このイベントで最新情報を取得し、useStateを更新すればいい。 リストのそこについたら再フェッチで無限スクロール onEndReachedという Propsが用意されている。 このイベントで最新情報を取得し、useStateを更新すればいい。 その際スクロールのタイミングで重複のデータがsetされることがあった。 重複チェックをすることで解決した。 またonEndReachedThresholdというPropsを使った。 onEndReachedThreshold: 0 ~ 1の間の数値でどのくらいの距離でonEndReachedを呼び出すかを決められます。0が一番近くで、1が一番遠いです。 という記事を参照したのだけれど、公式のPropsには明記されていなかった。 機能しているかを確認する必要がある。 ##その他、実装した機能 ボトムメニューのタブクリックでFlatListのトップにスクロールする const flatListRef = useRef<FlatList<Interface>>(null); レンダリング時にドムを取得しておき、タブクリックで書きイベントを発火させる。 if (flatListRef.current) { flatListRef.current.scrollToOffset({ animated: true, offset: 0 }); } スクロールバーを非表示にする showsVerticalScrollIndicatorというPropsをfalseにする。 まだ実装していないけど試したい機能 List~~~Componentを活用する ListEmptyComponent ListFooterComponent ListHeaderComponent 特にListFooterComponentは無限スクロール時の読み込みに使えそうなのでUI改善で使っていきたい。 たぶんこれくらい。 使ったPropsは以下の通り。 ref={flatListRef} data={timeline} keyExtractor={(item) => item....

投稿日 · 2025-01-11 · 更新日 · 2025-01-11 · 1 分 · nove-b

useStateの型、Dispatch<SetStateAction<T>> についてとジェネリック型

useStateの型 useStateの状態管理関数をPropsで渡すとき、受け取る側は Dispatch<SetStateAction<T>>; という方で受け取ることになる。 ジェネリクスのメリットがいまいち 関係ないけどずっと気になっていた「ジェネリクスのメリットがいまいちピンとこない件」について、ついでに調べてみることにした。 例えば、 // 文字列を入力し、文字列を出力する関数 const returnText = (input: string): string => { return input; }; // 数値を入力し、数値を出力する関数 const returnNumber = (input: number): number => { return input; }; console.log(returnText("hello world"), "returnText"); console.log(returnNumber(0), "returnNumber"); という関数が存在した時、 const returnTextOrNumber = (input: string | number): string | number => { return input; }; console.log(returnTextOrNumber("hello world"), "returnTextOrNumber"); console.log(returnTextOrNumber(0), "returnTextOrNumber"); こんな感じにまとめたくなる。 これをジェネリック型にすると、 const returnTextOrNumberGeneric = <T extends string | number>(input: T): T => { return input; }; こんな感じになる。...

投稿日 · 2025-01-11 · 更新日 · 2025-01-11 · 2 分 · nove-b

2024年を振り返ってみる

年が明けた、2024 + 1 去年に引き続き、また年が明けた。 そして去年に引き続き、ジャニーズのカウントダウンは開催されなかった。 すると当然のように毎年祝っていた堂本光一の誕生日を意識することなく、新年を迎えることになった。 ちょっとしたことで世界はガラッと変わる。 テレビから何人かの有名人が消え、M1の審査員もガラッと変わった。 変わらないものはないなんて言うけど、時間の進み具合は多分変わっていない。 去年も今年も同じくらいの時が経ち、年が明ける。 そしてたぶん来年も同じくらいの時が経てば、年が明ける。 それでもどうしてか、歳を取るにつれ、1年が短くなっている。 小学生の時は5分休みでドッチボールができるくらいだったのに、いまは5分じゃ何もできない。 1分の密度が明らかに変わってしまった。天才じゃないので1分1秒を大切にしていかなくちゃいけないのに、1分1秒をドブに捨ててきたことに気がついた。 年が明け、そのことに気が付いたのであれば、今年もまた年を重ねた意味があったのかもしれない。 桃鉄と年末 年末から年始にかけて、恒例のようになった桃鉄大会が妻と繰り広げられている。 テレビも見たいというので、昔使っていたテレビを引っ張りだし、桃鉄用に使っている。 つまりリビングに2台のテレビがある。どう考えたっておかしな状況であるんだけれど、年末年始はそれを許してくれる高揚感がある。桃鉄は毎年100年で行うんだけれど、完走したことがない。2024~2025年、今年こそは完走したいものである。 正解は1年後に。 2024年を振り返る さて、そういうわけで今年を振り返ることにする。 なんて、書き出して思ったけど、驚くべきことに、今年のことをなんにも覚えていない。 仕方がないので、書いたブログを読み直した。 GOでブログをリプレースして以降、毎月の振り返りを書いているので3月スタートになっていた。 月ごとの振り返り 1月と2月はそういうわけで記録がない故に記憶もない。……、本当に何も覚えていない。 2024年3月の月報 2024年4月の月報 3月と4月はネイティブアプリ作成していたらしい。今年の目標に掲げていたので、それを達成できるように頑張っていたらしい。ただこれは達成できなかったので、結果的に無駄な頑張りだった。 2024年5月の月報 5月は熱海旅行に行った。観光旅行は初めてだったので不安と期待があったけど、楽しかった。星野リゾートリゾナーレは子連れに良いという教訓を得た。 【2024年6月】読書できず、目標も完遂できず、ウィルス性腸炎が猛威を振るう 6月は自分を除く皆がロタウイルスに感染した。子どもは本当にいろいろ病気になる。まあ、そうやって強くなっていくので仕方ないけれど、保育園入園後が恐ろしい。保活もこの月から本格的に開始した。 【2024年7月】読書できず、仕事に追われている 7月からは仕事が忙しくなった。反省点も多く、勉強になった案件だった。ただ何より楽しかった。なんでこんなに仕事してるんだって思うこともあったけど、要件的にも楽しい案件だった。このときは9月には終わると思ってたけど、10月まで仕事漬けになった。 そんな中でSurfaceを購入してた。割高だとは思うけど、なかなかいい買い物をしたと思っている。ただフラグシップモデルを買うともう後戻りできないんだよなあ。次はジェネリックを賢く買いたい。 【2024年8月、9月】とにかく仕事に追われる 9月は双子と妻の誕生日があった。アンパンマンミュージアムに行くことができた。カレーカレーとはしゃぐ子どもは可愛かった。 【2024年10月】人間的生活を取り戻した 10月は仕事が終わり、自分の時間を作れるようになったのでMastodonのサーバーを立ち上げた。今年の目標の1つだったので、少し肩の荷がおりた。 【2024年11月】2024年の目標はきっと無理 11月は無事に保活も完了した。結果を待ちなので完了してはいないんだけど、やれることはやったので、あとは待つことしかできない。 【2024年12月】2024年が終わりを迎える 12月は本格的にアプリを作り始めた。いろいろ悩んだけど、react nativeを採用して、本当に少しづつ進めている。あと箱根旅行に行った。結果今年は2回旅行に行けた。来年は妻の育休が終わるので、それまでに色々遊びに行きたい。 今年買って良かったもの 恒例なのでまとめておく。 [Secrid]セクリッド シークリッド スリムウォ- レット Slim Wallet Coperta 【保育士が推薦】ヒップシート だっこひも Surface Pro(第 11 世代) QCY Crossky C30 イヤーカフ イヤホン 意外と少なかった。 ただ買った商品も少ないので、当たり率は高かったと思ってる。 特にコスパ最強だったのはイヤホン。今までイヤーカフ型のambieを使っていた。イヤーカフ型の先駆けだし、首掛けワイヤレス×1個、フルワイヤレス×2個とお世話になったけど、QCY Crossky C30のほうが圧倒的にコスパが良い。 料金は3分の1で、ambieより音質がいい。そういうわけで、今後はQCY Crossky C30を選ばないわけにはいかなくなった。イヤフォン業界にイヤーカフ型のながら聞きという、風穴を開けてくれたambieには感謝してもしきれない。ありがとう、ambie。ということで乗り換えた。...

投稿日 · 2025-01-05 · 更新日 · 2025-01-04 · 1 分 · nove-b

【2024年12月】2024年が終わりを迎える

12月に読んだ本 読んだ本は下記の通り。 四畳半タイムマシンブルース【電子特典付き】 四畳半シリーズ (角川文庫) 久々に四畳半のシリーズ読んだらやっぱり楽しかった。大学生時代しか楽しめない本だと思っていたけど、まだまだ現役だった。 夜空に泳ぐチョコレートグラミー(新潮文庫) デビュー作なの?筆力と言い、構成と言い、化け物すぎる。久々に衝撃の読者体験だった👏👏 八月の御所グラウンド (文春e-book) 面白かった。大学生×歴史で読みたい万城目学が一気に読めた。 六人の嘘つきな大学生 (角川文庫) 思っていたより散りばめられてた。それにしても何者といい就活は物語を生む。 キネマの神様 (文春文庫) 再読だけど、感動した。 箱根に行く 2歳 2ヶ月。 今年2度目の旅行は妻の両親を連れ箱根に行った。 冬晴れで気温も丁度よく、快適な旅行日和だった。 彫刻の森を散歩し、ガラスの森美術館でクリスマス気分を味わった。 双子の片方(重い方)は「ばあばばあば」と抱っこせがみ、ずっと抱っこで歩く姿を見て大変辛そうだなと思った。 宿は「はなをり」にした。 口コミがとてもよく、ランキングにも登場するので結構期待したんだけど、そんなに良くなかった。 子どもと旅行に行くのであれば、迷わず星野リゾートにするのが一番いい。 個人的に好きではないけど、子供連れという条件が付けば間違いない。 2日目はロープウェイに乗って、箱根元宮に行き、海賊船に乗って箱根神社に行った。 最近乗り物に興味出てきたので、たくさん乗せてあげようという魂胆だったが、初見で謎すぎたのか、そこまで反応を示さなかった。 双子の片方(重い方)は「ばあばばあば」と抱っこせがみ、ずっと抱っこで歩く姿を見て大変辛そうだなと思った(2日連続)。 特に2日目は階段が多く、本当に……。 良く喋る ばあばばあばと言うように2歳の誕生日を迎え、急に喋りだすようになった。 家に帰れば「おかーり」と言ってくれるし、ほどほどに会話が成り立つようになった。 そうなると急に可愛さが増す。ずっと一緒にいるわけじゃないのでわからないことも多いけど、喋れるようになって泣いて怒ることが減った気がする。たぶん、ずっと表現ができずに泣いていたのか、泣くことだけが唯一の表現方法だったのか。 夜も布団でよく寝てくれるようになった。 絵本を2冊読み、「げんこつ山」と「きんらきらぽん」を歌ったら寝るという謎のルーティンができた。 泣いて抱っことかなく、あまりにすんなり寝てくれるので、自分も思わず寝落ちしてしまうことが増えた。 2回目のクリスマス 今年のクリスマスは平日だったので、前の日曜日におこなった。 おこなったといっても自分は何もできない。料理もできなければ、ケーキも作れないので、ただただ申し訳ない気持ちでおいしくいただいた。子どもたちもおいしそうにケーキをを頬ばり幸せな気持ちになった。 最近は親の真似で写真を撮りたがり、スマホを奪おうとするので、プレゼントはキッズカメラにした。 子どもの撮った写真を見ることができるので、1つの思い出になる気がする。 結局ポッドキャストに戻ってきた ずっと仕事中とか運転中にポッドキャストを聞いてきたんだけど、一部ポッドキャストに配信していない動画等があり、youtubeを見るようになった。youtubeは広告だらけなので、有料版に登録した。お金払っているのでyoutubeをたくさん見ないといけないという貧乏魂が燃え、すべてのコンテンツをyoutubeで見るようになり、他のコンテンツを見なくなった。 ただなんとなくポッドキャストの方がコンテンツの質がいい気がする。 そこで結局ポッドキャストに戻ってきた。 来年はオーディブルとか試してみようかと思っている。 引き続きマストドンのクライアントを作成している 先月、作ろうと決意したマストドンのクライアントアプリを作っている。 着手できる時間が限られているので、全然進まないけど、止まってはいない。 ネイティブアプリ作成の概念がよくわからず苦労することもあるけど、書いているコードがReact Nativeなのでそこまで苦痛じゃない。リリースがいつになるか見当もつかないほどのんびりペースだけど、熱量は変わらずあるので悪い状況じゃない。 ただリリースまでたどり着かないと最悪なのでまずは最低限でリリースしたいと思っている。 今年が終わる また今年が終わる。 何も成し遂げていないけど、歳を重ねる。 何もないけど2024年もまとめようと思っている。 2024年まとめも書こうと思っているので、少し適当になったけど、なんとか書ききった。

投稿日 · 2024-12-28 · 更新日 · 2024-12-27 · 1 分 · nove-b