React Native改行挿入方法

React Nativeで<Text>コンポーネントに改行を挿入する方法

複数行の文字列を直接指定する

<Text>
  複数
  行の
  テキスト
</Text>

この方法では、各行の間に空白行を挿入することで改行を実現します。

\nエスケープシーケンスを使用する

<Text>
  複数行のテキスト\n
  を挿入できます。
</Text>

\nは改行を意味するエスケープシーケンスです。

numberOfLinesプロパティを使用する

<Text numberOfLines={3}>
  長いテキストを3行で表示します。
</Text>

numberOfLinesプロパティは、表示する行数を制限します。超過したテキストは省略されます。

スタイルプロパティで whiteSpace を設定する

<Text style={{ whiteSpace: 'pre-wrap' }}>
  複数行のテキストをそのまま表示します。
</Text>

whiteSpace: 'pre-wrap' を設定することで、空白文字や改行をそのまま表示します。

スタイルプロパティで textAlign を設定する

<Text style={{ textAlign: 'center' }}>
  中央揃えのテキスト
</Text>

textAlign プロパティは、テキストの水平方向の配置を設定します。

<Text>
  複数
  行の
  テキスト
</Text>

<Text>
  複数行のテキスト\n
  を挿入できます。
</Text>

<Text numberOfLines={3}>
  長いテキストを3行で表示します。
</Text>

<Text style={{ whiteSpace: 'pre-wrap' }}>
  複数行のテキストをそのまま表示します。
</Text>

<Text style={{ textAlign: 'center' }}>
  中央揃えのテキスト
</Text>

flexWrap プロパティを使用する:

<View style={{ flexWrap: 'wrap' }}>
  <Text>第一行</Text>
  <Text>第二行</Text>
</View>

この方法では、親コンポーネントである<View>にflexWrap: 'wrap'を指定することで、子要素である<Text>コンポーネントが複数行に折り返されるようになります。

lineHeight プロパティを使用する:

<Text style={{ lineHeight: 20 }}>
  このテキストは行間が20ピクセルになります。
</Text>

この方法では、<Text>コンポーネントの行間を調整することで、改行のタイミングを制御することができます。

カスタムコンポーネントを作成する:

const MyText = ({ children }) => (
  <Text style={{ whiteSpace: 'pre-wrap' }}>
    {children.split('\n').map((line) => (
      <Text key={line}>{line}</Text>
    ))}
  </Text>
);

この方法では、カスタムコンポーネントを作成し、その中で文字列を改行ごとに分割して表示することで、より柔軟な改行処理を実現することができます。