🏄‍♂️

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

2024/02/23に公開

Android

レス一覧画面（レス内容表示）

レス表示の調整を行っていきます。

contentのboldをやめ、authorNameとdateIdBeの文字を薄い色に変更してください。カラー指定は'#ccc'のような数値指定ではなく色名で指定できますか？
authorNameの前にレス番号を表示してください。
レス番号の後にピリオドは不要です。レス番号、authorName、email、dateIdBeを同じ行に表示し、空白でワードラップするようにしてください。
ワードラップで改行が発生した場合、先頭から「レス番号の桁数+1」文字分インデントしてください。一つのTextコンポーネントで表現するのが難しければ、レス番号用のセルと、その他の要素のセルを横に並べる等、案を提示してください。
改行が起こったときにインデントされていません。別の方法でトライしてください。

<ScrollView style={styles.container}>
  {responses.map((response, index) => (
    <View key={index} style={styles.response}>
      <View style={styles.responseHeader}>
        <Text style={styles.responseNumber}>{`${index + 1}`}</Text>
        <View style={styles.responseDetails}>
          <Text style={styles.authorName}>
            {`${response.authorName} ${response.email ? `${response.email} ` : ''}${response.dateIdBe}`}
          </Text>
        </View>
      </View>
      <Text style={styles.content}>{response.content}</Text>
    </View>
  ))}
</ScrollView>

const styles = StyleSheet.create({
  ...
  responseHeader: {
    flexDirection: 'row',
    marginBottom: 5,
  },
  ...
});

<View style={styles.responseHeader}>のスタイルとしてflexDirection: 'row'を指定し、<Text style={styles.responseNumber}>と<View style={styles.responseDetails}>を並べるという解決策になりました。

レス番号の右にマージンをとり、投稿者名や日時、IDが複数行になったときはインデントするという仕様が実現できていますね。

レス一覧画面（タイトル表示）

タイトルにResponseListと表示されていますが、スレッド名を表示してください。
現在のThreadListScreen.tsxからとResponseListScreen.tsxにスレッド名を渡すように調整してください。
スレッド名は長いためタイトルのスペースに表示しきれていません。タイトルを複数行に広げることはできますか？
iPhoneではカスタムヘッダタイトルでも1行しか表示されていません。また、前の画面に戻るためのリンクのテキストにタイトルが被って表示されています。Androidでは2行目まで表示されていて問題はありませんが、レスのテキストの色が投稿者名などと同じく薄い色で表示されています。
iPhoneの表示はまったく問題が解決されません。
iPhoneでは2行で表示されるようになり、タイトルの長さに応じてフォントが小さくなって全体が表示されるようになりました。しかし、前の画面に戻るためのリンクのテキストに重なる問題が解決されていません。また、タイトルがかなり長くなるとフォントサイズが小さくなって読めなくなります。Androidのようにフォントサイズは変えず、2行で表示しきれない部分は切り捨てるようにしてください。
iPhoneでタイトルが2段になったときに水平方向にセンタリングされています。左寄せにしてください。
Androidでカテゴリ一覧画面のカテゴリ名、板一覧画面の板名、スレ一覧画面のスレッド名がグレーで表示されています。黒で表示するように修正してください。

iOSとAndroidの両プラットホームで、ようやく思うようなスレッドタイトルの表示になりました。レス内容の調整と合わせ、ここまで3時間半かかってしまいました。仕様を知らずにAIに微妙な調整をしてもらうのはなかなか難しいですね。アンカーと画像表示はまた次回。

ここまでのソースコードです。

続きはこちら。

レス一覧画面（レス内容表示）

レス一覧画面（タイトル表示）

Discussion