web-dev-qa-db-ja.com

React Nativeの<Text>コンポーネントに改行を挿入する方法を教えてください。

React Nativeのテキストコンポーネントに新しい行（\ r\n、<br />など）を挿入したいです。

私が持っているならば：

<text><br />
Hi~<br >
this is a test message.<br />
</text>

次にReact NativeがHi~ this is a test message.をレンダリングします

次のようにテキストをレンダリングして新しい行を追加することはできますか。

Hi~
this is a test message.
javascripttextreact-nativenewline
207
Curtis

私は今それをテストできませんが、これはそれを行う必要があります：

<Text>
Hi~{"\n"}
this is a test message.
</Text>
486
Chris Ghenea

次のこともできます。

<Text>{`
Hi~
this is a test message.
`}</Text>

あなたが文字列の中にものを挿入する必要がないので、私の意見では簡単です。一度だけそれを包むとそれはすべてのあなたの改行を保持します。

68
Venryx

つかいます：

<Text>{`Hi,\nCurtis!`}</Text>

結果：

こんにちは、

カーティス！

17
COdek

これは私のために働きました

<Text>{`Hi~\nthis is a test message.`}</Text>

（反応ネイティブ0.41.0）

13
Olivier

状態変数からのデータを表示しているのであれば、これを使用してください。

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
8
Edison D'souza

改行として{'\n'}を使うことができます。こんにちは〜{'\ n'}これはテストメッセージです。

7
Vijay Suryawanshi

さらに良いことに、もしあなたがstyled-componentsを使えば、あなたはこのようなことをすることができます：

import React, { Component } from 'react';
import styled from 'styled-components';

const Text = styled.Text`
  text-align: left;
  font-size: 20px;
`;

export default class extends Component {

 (...)

 render(){
  return (
    <View>
      <Text>{`
        1. line 1
        2. line 2
        3. line 3
      `}</Text>
    </View>
  );
 }

}
4
Telmo Dias

こんな感じで使えます

<text>{`${val}\n`}</text>
3
Pankaj Agarwal

コードをうまくインデントするために、3項演算子で分岐する1行のソリューションが必要でした。

{foo ? `First line of text\nSecond line of text` : `Single line of text`}

崇高な構文の強調表示は、改行文字を強調表示するのに役立ちます。

Sublime syntax highlight

2
Beau Smith

また、レンダリングメソッドに定数として追加するだけで再利用が簡単になります。

  render() {
    const br = `\n`;
     return (
        <Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
     )  
  }
1
Tim J

次のようにすることができます。

{'アカウントを作成'}

1
Himanshu Ahuja

このように ``を使うことができます。

<Text>{`Hi~
this is a test message.`}</Text>
1
Idan

誰かが配列の各文字列に新しい行を追加したいという解決策を探している場合は、次のようにすることができます。

import * as React from 'react';
import { Text, View} from 'react-native';


export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      description: ['Line 1', 'Line 2', 'Line 3'],
    };
  }

  render() {
    // Separate each string with a new line
    let description = this.state.description.join('\n\n');

    let descriptionElement = (
      <Text>{description}</Text>
    );

    return (
      <View style={{marginTop: 50}}>
        {descriptionElement}
      </View>
    );
  }
}

実際の例についてはおやつを参照してください。 https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

0
ReturnOfTheMac