Word break react native

In this tutorial, you will learn react native text component wrap. We will look at example of react native text wrap to next line. you can see how to wrap text in react native. In this article, we will implement a how to wrap text in react native. Let’s get started with react native text wrap break word.

Sometimes, we need to wrap text in react native on screen. here we will add To wrap React Native text on the screen, we can set flexWrap to ‘wrap’. so let’s see simple example

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from "react";
import { StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={{ flexDirection: 'row',alignItems: 'center' ,justifyContent: 'center',flex:1}}>
      <Text style={{ flex: 1, flexWrap: 'wrap' }}>
        <View>
          <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
        </View>
        <View>
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
        </View>
      </Text>
    </View>
  );
}

Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you…

✌️ Like this article? Follow me on Twitter and Facebook. You can also subscribe to RSS Feed.

Я хочу вставить новую строку (например, r n, ‹br /›) в текстовый компонент в React Native.

Если у меня есть:

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

Затем React Native отображает Hi~ this is a test message.

Можно ли отобразить текст, чтобы добавить новую строку следующим образом:

Hi~
this is a test message.

person
Curtis
  
schedule
09.09.2015
  
source
источник

Это должно сделать это:

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

person
Chris Ghenea
  
schedule
09.09.2015

Вы также можете:

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

На мой взгляд, это проще, потому что вам не нужно вставлять что-то в строку; просто оберните его один раз, и он сохранит все ваши разрывы строк.

person
Venryx
  
schedule
21.11.2016

Использовать:

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

Результат:

Hi,

Кертис!

person
COdek
  
schedule
17.05.2018

Если вы вообще отображаете данные из переменных состояния, используйте это.

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

person
Edison D’souza
  
schedule
30.06.2017

Это сработало для меня

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

(реагировать-родной 0.41.0)

person
Olivier
  
schedule
13.02.2017

Вы можете использовать {'n'} как разрывы строк. Привет ~ {‘ n’}, это тестовое сообщение.

person
Vijay Suryawanshi
  
schedule
17.11.2017

Еще лучше: если вы используете styled-components, вы можете сделать что-то вроде этого:

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

}

person
Telmo Dias
  
schedule
28.11.2018

Мне нужно было однострочное решение с разветвлением в тернарном операторе, чтобы мой код оставался с хорошим отступом.

{foo ? `First line of textnSecond line of text` : `Single line of text`}

Превосходная подсветка синтаксиса помогает выделить символ разрыва строки:

person
Beau Smith
  
schedule
31.03.2017

Есть два варианта:

Вариант 1. Использование шаблонных литералов.

const Message = 'This is a message';

<Text>
{`
  Hi~
  ${Message}
`}
</Text>

Результат:

Hi~
This is a message

Вариант 2: Используйте {‘ n’} в качестве разрыва строки.

<Text>

   Hello {'n'}

   World!

</Text>

Результат:

Hello
World!

person
Biplov Kumar
  
schedule
10.10.2020

Вы можете попробовать вот так

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

person
Pankaj Agarwal
  
schedule
29.08.2018

Простые обратные кавычки (функция ES 6)

РЕШЕНИЕ 1

const Message = 'This is a message';

<Text>
{`
  Hi~
  ${Message}
`}
</Text>

РЕШЕНИЕ 2 Добавьте n в текст

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

person
Community
  
schedule
11.10.2020

Вы можете использовать « вот так:

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

person
Idan
  
schedule
06.12.2018

Сделать это можно следующим образом:

{‘Create nYour Account’}

person
Himanshu Ahuja
  
schedule
14.03.2019

Вы также можете просто добавить его как константу в свой метод рендеринга, чтобы его было легко использовать повторно:

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

person
Tim J
  
schedule
27.06.2019

Просто поместите {'n'} в текстовый тег

<Text>

   Hello {'n'}

   World!

</Text>

person
Curious96
  
schedule
16.11.2019

https://stackoverflow.com/a/44845810/10480776 Ответ @Edison D’souza был именно тем, что я искал . Однако он заменял только первое вхождение строки. Вот мое решение для обработки нескольких тегов <br/>:

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

Извините, я не смог прокомментировать его сообщение из-за ограничения оценки репутации.

person
ilike2breakthngs
  
schedule
03.05.2020

Вот решение для React (не React Native) с использованием TypeScript.

Та же концепция может быть применена к 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;

Использование:

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

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

Отображает:

person
Vadorequest
  
schedule
06.05.2020

сделай это:

<Text>

 { "Hi~ n this is a test message." }

<Text/>

person
Mahdi Eslami
  
schedule
29.12.2020

это хороший вопрос, вы можете сделать это несколькими способами: Первый

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

что означает, что вы можете использовать { n} обратную косую черту n для разрыва строки

Второй

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

это означает, что вы можете использовать другой компонент ‹View› внутри первого ‹View› и обернуть его вокруг ‹Text› компонента