React Native の <Text> コンポーネントに改行を挿入する方法：徹底解説

2024-06-21

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

テンプレートリテラルを用いる方法は、最も簡潔で分かりやすい方法です。以下のコードのように、バッククォート () で囲んだ文字列の中に改行 (\n) を直接記述できます。

<Text>{'1行目\n2行目'}</Text>

\n を {} で囲む

通常の文字列に \n を直接記述する代わりに、{} で囲んで記述する方法もあります。以下のコードのように、改行したい箇所を {} で囲み、その中に \n を記述します。

<Text>1行目{"\n"}2行目</Text>

コンポーネントを分割する

改行したい箇所でコンポーネントを分割する方法もあります。以下のコードのように、それぞれの行を別の <Text> コンポーネントで記述します。

<Text>1行目</Text>
<Text>2行目</Text>

補足

上記の方法以外にも、View コンポーネントと Text コンポーネントを組み合わせる方法などもあります。
コードの見やすさやメンテナンス性を考慮して、適切な方法を選択することが重要です。

テンプレートリテラルを使用する

import React from 'react';

const App = () => {
  return (
    <Text>{'1行目\n2行目'}</Text>
  );
};

export default App;

利点:

コードが簡潔で分かりやすい

特に無し

\n を {} で囲む

import React from 'react';

const App = () => {
  return (
    <Text>1行目{"\n"}2行目</Text>
  );
};

export default App;

テンプレートリテラルを使用しない場合でも改行を挿入できる

コードが少し冗長になる

コンポーネントを分割する

import React from 'react';

const App = () => {
  return (
    <View>
      <Text>1行目</Text>
      <Text>2行目</Text>
    </View>
  );
};

export default App;

コードの見やすさが向上する

コード量が増える

どの方法を使用するかは、状況や好みに合わせて選択してください。コードの見やすさやメンテナンス性を考慮して、適切な方法を選択することが重要です。

上記のサンプルコードは、いずれも最も基本的な例です。実際の開発では、状況に合わせて様々なバリエーションが考えられます。
例えば、行間の調整や、特定の文字列のみ改行するなどの処理が必要になる場合もあります。

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

Platform-specific な改行コードを使用する

React Native では、プラットフォームによって改行コードが異なります。以下のコードのように、Platform モジュールを使用して、適切な改行コードを挿入することができます。

import React, { Platform } from 'react';

const App = () => {
  const newline = Platform.OS === 'android' ? '\n' : '\r\n';
  return (
    <Text>1行目{newline}2行目</Text>
  );
};

export default App;

TouchableOpacity コンポーネントを使用すると、テキストを複数行に分割して表示することができます。以下のコードのように、numberOfLines プロパティを使用して、表示する行数を指定することができます。

import React from 'react';

const App = () => {
  return (
    <TouchableOpacity>
      <Text>1行目\n2行目\n3行目</Text>
    </TouchableOpacity>
  );
};

export default App;

改行処理をより詳細に制御したい場合は、カスタムコンポーネントを作成することができます。以下のコードは、改行コードを挿入するカスタムコンポーネントの例です。

import React from 'react';

const LineBreak = () => {
  return <Text>\n</Text>;
};

const App = () => {
  return (
    <Text>1行目<LineBreak />2行目<LineBreak />3行目</Text>
  );
};

export default App;

正規表現を使用して、テキスト内の特定の文字列を改行に置き換えることもできます。以下のコードは、スペース () を改行 (\n) に置き換える例です。

import React from 'react';

const App = () => {
  const text = '1行目 2行目 3行目';
  const newText = text.replace(/ /g, '\n');
  return (
    <Text>{newText}</Text>
  );
};

export default App;