Cum pot insera o linie într-o componentă în React Nativ?

Vreau pentru a introduce o linie nouă (ca \r\n, <br />) într-un Text componentă în React Nativ.

Dacă am avea:

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

Apoi React Nativ face Hi~ acesta este un mesaj de test.

Este posibil render text pentru a adăuga o nouă linie astfel:

Hi~
this is a test message.
systemovich
Întrebarea editată 27 februarie 2019 в 8:39
Programare
text javascript react-native newline
9 septembrie 2015 в 1:29
7 vizualizări
Soluția

Acest lucru ar trebui să facă:


Hi~{"\n"}
this is a test message.
Matt McDonald
Răspuns editat 24 septembrie 2019 в 3:38
Comentarii (8)

Puteți face, de asemenea,:

{`
Hi~
this is a test message.
`}

Mai ușor, în opinia mea, pentru că tu nu't au pentru a introduce lucrurile în șir; doar înfășurați-l o dată și se păstrează toate line-break.

Comentarii (6)

Utilizare:

{`Hi,\nCurtis!`}

Rezultatul:

Hi,

Curtis!

ata
Răspuns editat 17 mai 2018 в 10:25
Comentarii (2)

Aceasta a lucrat pentru mine 

{`Hi~\nthis is a test message.`}

(react nativ 0.41.0)

Comentarii (0)

Dacă sunteți afișarea datelor din variabilele de stare, utilizați acest lucru.

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

Puteți utiliza {&#39;\n&#39;} ca pauze de linie.

Hi~ {'\n'} acesta este un mesaj de test.
Saqib Omer
Răspuns editat 17 noiembrie 2017 в 7:58
Comentarii (0)

Mai bine: dacă utilizați stil-componente , poti face ceva de genul asta:

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 (

      {`
        1. line 1
        2. line 2
        3. line 3
      `}

  );
 }

}
Comentarii (0)

Puteți încerca să utilizați astfel de prognoze 

{`${val}\n`}
Comentarii (0)

Am nevoie de o singură linie de soluții de ramificare într-o operatorul ternar pentru a menține codul meu frumos indentat. 

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

Sublim evidențierea sintaxei vă ajută să evidențiați linia de pauză caracter:

Comentarii (0)

Puteți, de asemenea, doar adăugați-l ca o constantă în metoda de randare atât de ușor de a reutiliza:

  render() {
    const br = `\n`;
     return (
        Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom
     )  
  }
Comentarii (0)

Puteți utiliza ` de genul asta:

{`Hi~
this is a test message.`}
Comentarii (0)

Poti face după cum urmează:

{'Crea\nYour Cont'}
Comentarii (1)

Pune {&#39;\n&#39;} în Textul tag



   Hello {'\n'}

   World!
Chris McGrath
Răspuns editat 16 noiembrie 2019 в 11:36
Comentarii (0)

În cazul în care cineva este în căutarea pentru o soluție în cazul în care doriți să aveți o nouă linie pentru fiecare șir într-o matrice ai putea face ceva de genul asta:

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 = (
      {description}
    );

    return (

        {descriptionElement}

    );
  }
}

Vezi gustare pentru un exemplu viu: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

Comentarii (0)

am'm folosind reacționa js. nici unul dintre raspunsurile de mai sus au de lucru pentru mine singur, dar combinate. probabil ar trebui să lucreze pe nativ prea. codul de mai jos,

//reacționa js

<div style={{ whiteSpace: 'pre-wrap' }}>
 {`hello \nthere`}
</div>

//nativ (am't a fost testat, dar, din punct de vedere tehnic ar trebui să funcționeze..)



 {`hello \nthere`}
sarathantony
Răspuns editat 6 septembrie 2019 в 5:24
Comentarii (0)

Doar folosi {"\n"} în cazul în care doriți să rupă linia

Comentarii (0)

Utilizat \n în text și css white-space: pre-wrap;

Comentarii (1)