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!