🏄‍♂️

React Native & ChatGPT モバイルアプリ開発(6)

2024/02/17に公開

Android

スレッド一覧画面(2)

下記の要件に従ってThreadListScreenを修正してください。encoding-japaneseをインストール済みです。
1. 引数として受け取ったitemのプロパティitem.urlの直下にあるsubject.txtの内容を取得する。
2. 読み込んだsubject.txtのエンコーディングをJavaScriptの内部エンコーディングに変換する。この時、変換オプションのtoにはUNICODEを指定し、fromはencoding-japaneseに推測させる。
3. 変換結果をスレッド一覧画面に表示する。
TS2345: Argument of type 'string' is not assignable to parameter of type 'IntArrayType'.というエラーが発生しています。
下記の要件に従ってThreadListScreenを修正してください。
1. 内部エンコーディングに変換したsubject.txtの内容を改行で分割する。
2. 各行の内容を<>という2文字を区切り文字として2つに分割する。
3. 分割した1つ目は拡張子が.datというファイル名であり、後で使用するために保存しておく。
4. 分割した2つ目はスレッドタイトルであり、全行のこのスレッドタイトルをリスト表示する。
5. 現在表示しているBoard NameとURLは表示しない
下記の要件に従ってThreadListScreenを修正してください。
1. 改行は\rや\r\nの可能性もあります。3種類の改行に対応してください。
2. <>の前のdatファイル名を捨てずに、スレッドタイトルとdatファイル名をペアで持つデータ構造をtypes.tsの中に作成し、それを利用するようにしてください。
Promise returned from fetchSubjectTxt is ignoredという軽い警告が出ていますが消すことはできますか？
スレッドタイトルの間に細いグリッド線を引いてください。
スレッドタイトル間にグリッド線が引かれないようです。GridItemを利用するようにThreadListScreenを修正してください。
引数のisFirstRowは適切に判定し、isLeftCellは常にfalseで呼び出せばよいのではないでしょうか？
警告に対応してください。ESLint: Inline style: { flex: 1 } (react-native/no-inline-styles)

スレッドタイトルのリスト表示ができるようになりましたが、微調整が必要なようです。

スレッドタイトルに含まれているHTMLエンティティをデコードしてください。
he.decodeの呼び出しで"TypeError: Cannot read property 'replace' of undefined"という例外が発生しています。
提示された解決策もよいと思うのですが、そもそもsubject.txtの最終行に改行が含まれていた場合に、改行での分割時に最後の空要素をオミットしておくべきではないのでしょうか。
スレッドタイトルの表示が複数行になった場合に、適切にセルの高さを調整するようにGridItem.tsxを修正してください。
セル内のテキストは左寄せで、セルのパディングは15としてください。
カテゴリ一覧画面のタイトルは「5ちゃんねる」としたいのですが、これをApp.tsx内で指定するのではなくCategoryListScreenに任せることは可能ですか？
App.tsx側の呼び出しはどうなりますか？
板一覧画面のタイトルの表示をBoardListScreenに任せるためにApp.tsxからタイトルの指定を削除してください。
CategoryListScreenからBoardListScreenへの遷移でcategoryNameを渡せるようにRootStackParamListのBoardListを修正してください。
板一覧画面で、受け取ったカテゴリ名をタイトルとして表示してください。
スレッド一覧画面でitem.board_nameをタイトルとして表示してください。

なんとなく見栄えが整ってきましたね。今日は3時間ほどの作業でした。スレッド一覧画面までできたので、画面数としては3/4まできました。

と思ったらスレッド一覧画面からスワイプで板一覧画面に戻る機能がインプリメントできていないことに気づきました。次回はここからですね。

ここまでのコードです。

続きはこちら。

Flutter版はこちら。

スレッド一覧画面(2)

Discussion