🏄♂️
React Native & ChatGPT モバイルアプリ開発(10)
レス一覧画面（画像表示）
アンカーに対応しようとして行き詰まってしまったので、方向を変えてまずは画像から対応してみたいと思います。
- png/jpg/jpeg/gif等、画像と思われるURLがあった場合にインライン表示してください。
- "jpg"や"jpeg"という文字列しか表示されず、画像が表示できていません。修正してください。
- 画像が表示されるようになりましたが、画像の下に"jpg"や"jpeg"という文字が表示されています。この文字を消してください。
const parts = content.split(/(https?:\/\/\S+\.(?:jpg|jpeg|png|gif))/gi);
画像の拡張子をグルーピングしているところでキャプチャされ、その文字列が分割後の配列に含まれていたようで、?:で解決でした。TypeScriptのsplitに正規表現を渡すと()でキャプチャして分割後の配列に含めてくれるのですね。ここではURL全体と拡張子がどちらもキャプチャされていました。
とりあえず画像が表示されるようになりました。
詳細を詰めていきましょう。
- 画像をその画像が含まれるレスのコンテンツ全体の一番下にまとめて配置することはできますか？
- 画像が縦に並んでしまっています。画像をインラインで横に並べてください。
- 画像のURLをレス内にタップ可能なリンクとして残してください。
- 画像のURLをタップしたらブラウザで画像を開いてください。
- 画像自体をタップしたらアプリ内で表示する動作は変えないでください。
- 画像をアプリ内で拡大表示する時に透過せずバックグラウンドは黒にしてください。
次はssspのnida.gifや画像以外のURLに対応した後、アンカーの処理をなんとかしたいと思います。
ここまでのソースコードです。
Discussion