Ik wil een nieuwe regel (zoals \r\n, <br />) in een tekstcomponent in React Native invoegen.

Als ik heb:

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

Vervolgens geeft React Native Hi~ this is a test message.

Is het mogelijk om tekst te renderen om een ​​nieuwe regel toe te voegen, zoals:

Hi~
this is a test message.

Antwoord 1, autoriteit 100%

Dit zou het moeten doen:

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

Antwoord 2, autoriteit 15%

U kunt ook het volgende doen:

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

Gemakkelijker naar mijn mening, omdat je geen dingen in de string hoeft in te voegen; wikkel het één keer en het behoudt al je regeleinden.

Antwoord 3, autoriteit 6%

Gebruik:

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

Resultaat:

Hallo,

Curtis!

Antwoord 4, autoriteit 2%

Dit werkte voor mij

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

(react-native 0.41.0)

Antwoord 5, autoriteit 2%

Als je al gegevens van toestandsvariabelen weergeeft, gebruik dit dan.

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

Antwoord 6, autoriteit 2%

Je kunt {'\n'}gebruiken als regeleinden.
Hi~ {‘\n’} dit is een testbericht.

Antwoord 7

Oplossing 1:

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

Oplossing 2:

<Text>{`
  line 1
  line 2
 `}</Text>

Oplossing 3:

Hier was mijn oplossing voor het verwerken van meerdere <br/>-tags:

<Text style={{ whiteSpace: "pre-line" }}>
    {"Hi<br/> this is a test message.".split("<br/>").join("\n")}
</Text>

Oplossing 4:

gebruik maxWidthvoor automatisch regeleinde

<Text style={{ maxWidth:200}}>this is a test message. this is a test message</Text>

Antwoord 8

BEWERK:

als u Template Literalsgebruikt (zie binnen het <Text>element), kunt u de regeleinden ook gewoon als volgt toevoegen:

import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class extends Component {
 (...)
 render(){
  return (
    <View>
      <Text>{`
        1. line 1
        2. line 2
        3. line 3
      `}</Text>
    </View>
  );
 }
}

Antwoord 9

Ik had een eenregelige oplossing nodig die vertakt in een ternaire operator om mijn code netjes ingesprongen te houden.

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

Sublieme syntaxisaccentuering helpt het regeleindeteken te benadrukken:

Antwoord 10

https://stackoverflow.com/a/44845810/10480776@Edison D’souza’s antwoord was precies wat ik was aan het zoeken naar. Het verving echter alleen het eerste voorkomen van de tekenreeks. Dit was mijn oplossing voor het omgaan met meerdere <br/>-tags:

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

Sorry, ik kon geen commentaar geven op zijn bericht vanwege de beperking van de reputatiescore.

Antwoord 11

Er zijn twee opties:

Optie 1:Sjabloonliteratuur gebruiken.

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

Resultaat:

Hi~
This is a message

Optie 2:Gebruik {‘\n’} als regeleinden.

<Text>
   Hello {'\n'}
   World!
</Text>

Resultaat:

Hello
World!

Antwoord 12

Je kunt het op deze manier proberen

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

Antwoord 13

dit is een leuke vraag, je kunt dit op meerdere manieren doen
Eerste

<View>
    <Text>
        Hi this is first line  {\n}  hi this is second line 
    </Text>
</View>

wat betekent dat je {\n}backslash n kunt gebruiken om de regel te breken

Tweede

<View>
     <Text>
         Hi this is first line
     </Text>
     <View>
         <Text>
             hi this is second line 
         </Text>
     </View>
</View>

wat betekent dat u een andere <View> component binnen eerst <Bekijken> en wikkel het om <Tekst> onderdeel

Veel plezier met coderen

Antwoord 14

Je kunt het ook gewoon als een constante in je rendermethode toevoegen, zodat het gemakkelijk opnieuw kan worden gebruikt:

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

Antwoord 15

Eenvoudig te gebruiken backticks (ES 6-functie)

OPLOSSING 1

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

OPLOSSING 2Voeg “\n” toe in tekst

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

Antwoord 16

Je kunt “ als volgt gebruiken:

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

Antwoord 17

Je kunt het als volgt doen:

{‘Maak\nUw account’}

Antwoord 18

Plaats {'\n'}in de teksttag

<Text>
   Hello {'\n'}
   World!
</Text>

Antwoord 19

Een van de schoonste en meest flexibele manieren is het gebruik van Sjabloonletters.

Een voordeel van het gebruik hiervan is dat als je de inhoud van de stringvariabele in de tekst wilt weergeven, het overzichtelijker en ongecompliceerd is.

(Let op het gebruik van backtick-tekens)

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

Zou resulteren in

Hi~
This is a test message

Antwoord 20

Hier is een oplossing voor React (niet React Native) met TypeScript.

Hetzelfde concept kan worden toegepast op 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;

Gebruik:

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

Beeldschermen:

Antwoord 21

doe dit:

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

const {height,width} = Dimensions.get('screen');
const string = `This is the description coming from the state variable, It may long thank this` 
<Text style={{ maxWidth:width/2}}>{string}</Text>

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

<Text>{textContent}</Text>

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

const charChangeLine = `
`
// const charChangeLine = "\n" // or it is ok
const textWithChangeLine = "abc\ndef"
<Text>{textWithChangeLine.replace('¥n', charChangeLine)}</Text>

abc
def

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

<Text>
  You have {" "}
  {remaining}$ {" "}
  from{" "}
  {total}$
<Text>

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

   export class AppTextMultiLine extends React.PureComponent {
    render() {
    const textArray = this.props.value.split('\n');
return (
        <View>
            {textArray.map((value) => {
               return <AppText>{value}</AppText>;
            })}
        </View>
    )
}}