🏄‍♂️

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

2024/02/23に公開

レス一覧画面(2)

  • スレッド一覧画面でスレッド名がタップされたらレス一覧画面へ遷移したいと思います。板urlとdatファイル名を渡してレス一覧画面で表示してください。
  • スレッド名をタップすると以下のエラーが発生します。修正してください。
    The action 'NAVIGATE' with payload {"name":"ResponseList","params":{"boardUrl":"https://greta.5ch.net/poverty/","datFileName":"1708609901.dat"}} was not handled by any navigator. Do you have a screen named 'ResponseList'?
  • ThreadListScreenで以下のエラーが発生しています。修正してください。
    TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.

実は新しくインストラクションを指定したchatで開発を進めようとしたのですが、なかなか上手くレス一覧画面への遷移が行えませんでした。ソースコードをアップロードしたりしたのですが、整合性を保ったままコードの生成を行うのは困難でした。

これまでの開発履歴を残したchatでやり直したところあっさりと解決。初期からの開発経緯が残っている一つのchatで継続するのが一番のようです。

  • ThreadListScreenを参考にして、ResponseListScreenで${boardUrl}dat/${datFileName}からコンテンツを読み出して行に分割し、さらにdatの仕様にしたがって<>で分割してください。
  • <>で分割した後は、types.tsのResponseContentを使用してください。
  • urlからfetchして行に分割するときはThreadListScreenのコードを参照してください。最後の改行のあとは空白行になるためエラーが発生しています。また、改行はLFとは限らないので3種類に対応してください。
  • authorNameとcontentの文字実体参照を文字に変換してください。
  • authorNameのdecode前に</b>と<b>のタグを削除してください。また、authorNameとdateIdBeはボールドやイタリックを指定せずに通常のフォントで少し小さめに表示してください。contentにはボールドを指定してください。
  • contentのdecode前に
    タグを改行に置き換えてください。fontSizeは12のように具体的な数値ではなくsmallのような相対的な指定はできませんか?また、marginについても1emや0.5emなど文字に対する相対的な指定はできませんか?

React Nativeでは相対的なサイズ指定はできないのですね。

  • content内の
    を改行に置き換えた後、各行の先頭と末尾にある半角スペースを1つずつ削除してください。存在しない場合もあるので、存在した場合は、先頭から1つ、末尾から1つの半角スペースを削除です。

残りはアンカーと画像の表示でしょうか。今日はここまでで3時間半ほどかかりました。

ここまでのコードです。
https://github.com/yasuda0320/SurfPlank/tree/series008

続きはこちら。
https://zenn.dev/nori/articles/b8c71492b34807

Discussion