javascript - salto - skip line react native

¿Cómo puedo insertar un salto de línea en un componente<Texto> en React Native?

Question

Quiero insertar una nueva línea (como / r / n, <br />) en un componente de texto en React Native.

Si tengo:

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

Luego, React Native representa Hi~ this is a test message.

¿Es posible renderizar texto para agregar una nueva línea así:

Hi~
this is a test message.

Answer 1

En caso de que alguien esté buscando una solución en la que desee tener una nueva línea para cada cadena en una matriz, puede hacer algo como esto:

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

Vea la merienda para ver un ejemplo en vivo: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

Answer 2

Esto debería hacerlo:

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

Answer 3

Esto funciono para mi

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

(reaccionar nativo 0.41.0)

Answer 4

Estoy usando react js. ninguna de las respuestas anteriores funcionó solo para mí, pero combinadas. probablemente también debería funcionar en nativo. código a continuación,

// reacciona js

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

// nativo (no lo he probado pero, técnicamente debería funcionar ...)

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

Answer 5

Mejor aún: si usa styled-components , puede hacer algo como esto:

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

Answer 6

Necesitaba una solución de una línea ramificada en un operador ternario para mantener mi código bien sangrado.

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

El resaltado de sintaxis sublime ayuda a resaltar el carácter de salto de línea:

Answer 7

Puede usar {''/n''} como saltos de línea. Hola ~ {''/ n''} este es un mensaje de prueba.

Answer 8

Puede usar `` así:

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

Answer 9

Puedes hacerlo de la siguiente manera:

{''Crear / nSu cuenta''}

Answer 10

Puedes intentar usarlo así

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

}

Answer 11

Si está mostrando datos de variables de estado, use esto.

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

Answer 12

Simplemente use {"/ n"} donde quiera romper la línea

Answer 13

También puede agregarlo como una constante en su método de renderizado para que sea fácil de reutilizar:

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

Answer 14

También puedes hacer:

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

Más fácil en mi opinión, porque no tienes que insertar cosas dentro de la cadena; solo envuélvelo una vez y mantendrá todos tus saltos de línea.

Answer 15

Use /n en texto y white-space: pre-wrap; CSS white-space: pre-wrap;

Answer 16

Utilizar:

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

Resultado:

Hola,

Curtis!