web-dev-qa-db-fra.com

Comment insérer un saut de ligne dans un composant <Texte> dans React Native?

Je souhaite insérer une nouvelle ligne (comme\r\n, <br />) dans un composant texte dans React Native.

Si j'ai:

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

Puis React Native rend Hi~ this is a test message.

Est-il possible de rendre un texte en ajoutant une nouvelle ligne comme ceci:

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

Je ne peux pas le tester maintenant mais cela devrait le faire:

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

Vous pouvez aussi faire:

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

Plus facile à mon avis, car il n'est pas nécessaire d'insérer des éléments dans la chaîne; emballez-le une seule fois et conserve tous vos sauts de ligne.

71
Venryx

Utilisation:

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

Résultat:

Salut,

Curtis!

24
COdek

Cela a fonctionné pour moi

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

(react-native 0.41.0)

13
Olivier

Vous pouvez utiliser {'\n'} comme sauts de ligne. Bonjour ~ {'\ n'} ceci est un message de test.

9
Vijay Suryawanshi

Si du tout vous affichez des données de variables d'état, utilisez ceci.

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

Mieux encore: si vous utilisez styled-components, vous pouvez faire quelque chose comme ceci:

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

}
3
Telmo Dias

Vous pouvez essayer d'utiliser comme ça

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

J'avais besoin d'une solution en une ligne avec un opérateur ternaire pour conserver mon code bien en retrait.

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

La mise en évidence de la syntaxe Sublime permet de mettre en évidence le caractère de saut de ligne:

Sublime syntax highlight

2
Beau Smith

Vous pouvez aussi simplement l'ajouter en tant que constante dans votre méthode de rendu afin qu'il soit facile à réutiliser:

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

Vous pouvez le faire comme suit:

{'Créez votre compte'}

1
Himanshu Ahuja

Vous pouvez utiliser `` comme ceci:

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

Si quelqu'un cherche une solution pour laquelle vous souhaitez créer une nouvelle ligne pour chaque chaîne d'un tableau, vous pouvez procéder de la manière suivante:

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

Voir snack pour un exemple en direct: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

0
ReturnOfTheMac