Comment puis-je insérer un saut de ligne dans un composant <Text> dans React Native?


336

Je veux insérer une nouvelle ligne (comme \ r \ n, <br />) dans un composant Text 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 le texte pour ajouter une nouvelle ligne comme ceci:

Hi~
this is a test message.

Vous pouvez utiliser \noù vous voulez rompre la ligne.
Sam009

Réponses:


655

Cela devrait le faire:

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

21
Existe-t-il un moyen de le faire avec une chaîne de variable afin que je puisse utiliser <Text>{content}</Text>:?
Roman Sklenar

2
\ n est un saut de ligne
Chris Ghenea

8
Merci pour cela. J'ai fini par faire un composant de saut de ligne pour un accès rapide var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Jonathan Lockley

4
Que faire si le texte est dans une variable chaîne? <Text>{comments}</Text>Nous ne pouvons pas utiliser la {\n}logique là-bas. Alors comment?
user2078023

2
Si le texte provient d'un accessoire, assurez-vous de le passer comme ceci: <Component text={"Line1\nLine2"} />au lieu de <Component text="Line1\nLine2" />(remarquez les accolades ajoutées)
qwertzguy

92

Vous pouvez également faire:

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

Plus facile à mon avis, car vous n'avez pas besoin d'insérer des trucs dans la chaîne; il suffit de l'envelopper une fois et il conserve tous vos sauts de ligne.


7
c'est la solution la plus propre à ce jour, avecwhite-space: pre-line;
Tomasz Mularczyk

3
@Tomasz: Je pense qu'il n'y a pas d'espace blanc ou d'espace blanc: -Feuille de feuille pour <Texte> -Étiquette en réactif natif - ou je me trompe?
2017

1
Les littéraux de modèle sont propres et nets
comparés à la

Je suppose que le style d'espace blanc est censé supprimer les espaces d'intention, non? Si oui, j'en ai désespérément besoin, sinon les littéraux de chaîne deviennent très moche ...
Xerus

@Xerus Vous pouvez simplement utiliser un post-processeur de texte pour supprimer l'indentation, comme on le voit ici: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx

34

Utilisation:

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

Résultat:

Salut,

Curtis!


2
Cela ne semble pas fonctionner lorsque le message est une variable de chaîne: <Text> {message} </Text>
user2078023

Vous pouvez utiliser une fonction comme celle-ci: splitLine = message => {...} et RegExp, puis <Text> {this.splitLine (message)} </Text>
COdek

13

Cela a fonctionné pour moi

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

(0.41.0 natif réactif)


12

Si vous affichez des données de variables d'état, utilisez-le.

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

9

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


4

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

}

1
Cela n'a rien à voir avec les composants de style et fonctionnera, que vous les utilisiez ou non.
Kuba Jagoda


2

J'avais besoin d'une solution sur une seule branche avec un opérateur ternaire pour garder 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:

Mise en évidence de la syntaxe sublime


1

Vous pouvez utiliser `` comme ceci:

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

1

Vous pouvez le faire comme suit:

{'Créer \ nVotre compte'}


Cela a également fonctionné ici <Header headerText = {'Muhammad \ n Tayyab \ n Rana'} subHeadline = "Web Developer and Designer" />
muhammad tayyab

1

Vous pouvez également 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

Mettez simplement {'\n'}la balise Text

<Text>

   Hello {'\n'}

   World!

</Text>

1

L'un des moyens les plus propres et les plus flexibles serait d'utiliser des modèles de littéraux .

Un avantage de cette utilisation est que si vous souhaitez afficher le contenu de la variable chaîne dans le corps du texte, elle est plus claire et simple.

(Veuillez noter l'utilisation de caractères de backtick)

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

Résulterait en

Hi~
This is a test message

0

Dans le cas où quelqu'un cherche une solution où vous souhaitez avoir une nouvelle ligne pour chaque chaîne dans un tableau, vous pouvez faire quelque chose comme ceci:

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 collation pour un exemple en direct: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example



0

Une autre façon d'insérer <br>entre des lignes de texte définies dans un tableau:

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;
  }, []);

Ensuite, le texte peut être utilisé comme variable:

<Text>{textContent}</Text>

Si non disponible, Fragmentpeut être défini de cette façon:

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

0

https://stackoverflow.com/a/44845810/10480776 @Edison D'souza était exactement ce que je cherchais. Cependant, il ne faisait que remplacer la première occurrence de la chaîne. Voici ma solution pour gérer plusieurs <br/>balises:

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

Désolé, je n'ai pas pu commenter son message en raison de la limitation du score de réputation.


0

Voici une solution pour React (pas React Native) en utilisant TypeScript.

Le même concept peut être appliqué à React Native

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;

Usage:

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

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

Affiche: entrez la description de l'image ici


-3

Utilisation \nen texte et csswhite-space: pre-wrap;


1
Je ne vois pas whiteSpacerépertorié comme un accessoire de style de texte natif React . Notez que ce n'est pas du HTML.
binki

pour référence cela fonctionne dans react js. D'autres pour une raison quelconque ne travaillent pas pour moi.
HimanshuArora9419
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.