Bagaimana saya bisa memasukkan pemecah baris ke komponen <Text> di React Native?

Saya ingin menyisipkan baris baru (seperti \ r \ n, <br />) dalam komponen teks di React Native.

Jika saya punya:

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

Kemudian React Native renders Hi~ this is a test message.

Apakah mungkin membuat teks untuk menambahkan baris baru seperti:

Hi~
this is a test message.

Ini harus dilakukan:

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

Anda juga dapat melakukan:

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

Lebih mudah menurut saya, karena Anda tidak harus memasukkan barang ke dalam string; hanya membungkusnya sekali dan itu membuat semua jeda Anda.

Menggunakan:

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

Hasil:

Hai,

Curtis!

Ini berhasil untuk saya

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

(reaksi asli 0.41.0)

Jika Anda menampilkan data dari variabel status, gunakan ini.

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

Anda dapat menggunakan {'\n'}sebagai jeda baris. Hai ~ {'\ n'} ini adalah pesan ujian.

Lebih baik lagi: jika Anda menggunakan styled-components, Anda dapat melakukan sesuatu seperti ini:

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>
  );
 }

}

Anda dapat mencoba menggunakan seperti ini

<text>{`${val}\n`}</text>

Saya membutuhkan solusi satu baris yang bercabang di operator ternary untuk menjaga kode saya terindentasi dengan baik.

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

Penyorotan sintaks yang luhur membantu menyoroti karakter line-break:

Anda dapat menggunakan `` seperti ini:

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

Anda dapat melakukannya sebagai berikut:

{'Buat \ n Akun Anda'}

Anda juga bisa menambahkannya sebagai konstanta dalam metode render Anda sehingga mudah digunakan kembali:

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

Masukkan saja ke {'\n'}dalam tag Teks

<Text>

   Hello {'\n'}

   World!

</Text>

Salah satu cara paling bersih dan paling fleksibel adalah menggunakan Templat Literal .

Keuntungan menggunakan ini adalah, jika Anda ingin menampilkan konten variabel string di badan teks, itu lebih bersih dan lurus ke depan.

(Harap perhatikan penggunaan karakter backtick)

const customMessage = 'This is a test message';
<Text>
{`
  Hi~
  ${customMessage}
`}
</Text>

Akan menghasilkan

Hi~
This is a test message

Jika ada yang mencari solusi di mana Anda ingin memiliki baris baru untuk setiap string dalam array Anda bisa melakukan sesuatu seperti ini:

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>
    );
  }
}

Lihat camilan untuk contoh langsung: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

Cukup gunakan {"\ n"} di mana Anda ingin memutuskan garis

Cara lain untuk menyisipkan <br>antara baris teks yang didefinisikan dalam array:

import react, { Fragment } from 'react';

const lines = [
  'One line',
  'Another line',
];

const textContent =
  lines.reduce(items, line, index) => {
    if (index > 0) {
      items.push(<br key={'br-'+index}/>);
    }
    items.push(<Fragment key={'item-'+index}>{line}</Fragment>);
    return items;
  }, []);

Kemudian teks dapat digunakan sebagai variabel:

<Text>{textContent}</Text>

Jika tidak tersedia, Fragmentdapat didefinisikan dengan cara ini:

const Fragment = (props) => props.children;

https://stackoverflow.com/a/44845810/10480776 @Edison D'souza jawaban persis apa yang saya cari. Namun, itu hanya menggantikan kemunculan pertama string. Inilah solusi saya untuk menangani beberapa <br/>tag:

<Typography style={{ whiteSpace: "pre-line" }}>
    {shortDescription.split("<br/>").join("\n")}
</Typography>

Maaf, saya tidak dapat mengomentari posnya karena batasan skor reputasi.

Berikut adalah solusi untuk Bereaksi (bukan Bereaksi Asli) menggunakan TypeScript.

Konsep yang sama dapat diterapkan untuk Bereaksi Asli

import React from 'react';

type Props = {
  children: string;
  Wrapper?: any;
}

/**
 * Automatically break lines for text
 *
 * Avoids relying on <br /> for every line break
 *
 * @example
 * <Text>
 *   {`
 *     First line
 *
 *     Another line, which will respect line break
 *  `}
 * </Text>
 * @param props
 */
export const Text: React.FunctionComponent<Props> = (props) => {
  const { children, Wrapper = 'div' } = props;

  return (
    <Wrapper style={{ whiteSpace: 'pre-line' }}>
      {children}
    </Wrapper>
  );
};

export default Text;

Pemakaian:

<Text>
  {`
    This page uses server side rendering (SSR)

    Each page refresh (either SSR or CSR) queries the GraphQL API and displays products below:
  `}
</Text>

Menampilkan:

Gunakan \ndalam teks dan csswhite-space: pre-wrap;