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

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.

Cela devrait le faire:

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

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.

Utilisation:

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

Résultat:

Salut,

Curtis!

Cela a fonctionné pour moi

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

(0.41.0 natif réactif)

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

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

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

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

}

Vous pouvez essayer d'utiliser comme ça

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

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:

Vous pouvez utiliser `` comme ceci:

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

Vous pouvez le faire comme suit:

{'Créer \ nVotre compte'}

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

Mettez simplement {'\n'}la balise Text

<Text>

   Hello {'\n'}

   World!

</Text>

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

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

Utilisez simplement {"\ n"} où vous voulez casser la ligne

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;

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.

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:

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