Làm cách nào tôi có thể chèn ngắt dòng vào thành phần <Text> trong React Native?

Tôi muốn chèn một dòng mới (như \ r \ n, <br />) trong thành phần Văn bản trong React Native.

Nếu tôi có:

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

Sau đó React Native kết xuất Hi~ this is a test message.

Có thể kết xuất văn bản để thêm một dòng mới như vậy:

Hi~
this is a test message.

Điều này nên làm điều đó:

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

Bạn cũng có thể làm:

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

Theo ý kiến ​​của tôi dễ dàng hơn, bởi vì bạn không phải chèn nội dung trong chuỗi; chỉ cần bọc nó một lần và nó sẽ giữ tất cả các ngắt dòng của bạn.

Sử dụng:

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

Kết quả:

Chào,

Công tước!

Điều này làm việc cho tôi

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

(phản ứng gốc 0,41.0)

Nếu ở tất cả các bạn đang hiển thị dữ liệu từ các biến trạng thái, sử dụng này.

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

Bạn có thể sử dụng {'\n'}như ngắt dòng. Xin chào ~ {'\ n'} đây là tin nhắn thử nghiệm.

Tốt hơn nữa: nếu bạn sử dụng styled-components, bạn có thể làm một cái gì đó như thế này:

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

}

Bạn có thể thử sử dụng như thế này

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

Tôi cần một giải pháp một dòng phân nhánh trong một toán tử ternary để giữ cho mã của tôi được thụt lề độc đáo.

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

Làm nổi bật cú pháp tuyệt vời giúp làm nổi bật ký tự ngắt dòng:

Bạn có thể sử dụng `` như thế này:

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

Bạn có thể làm như sau:

{'Tạo \ n Tài khoản của bạn'}

Bạn cũng có thể chỉ cần thêm nó dưới dạng hằng số trong phương thức kết xuất của mình để dễ dàng sử dụng lại:

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

Chỉ cần đặt {'\n'}trong thẻ Text

<Text>

   Hello {'\n'}

   World!

</Text>

Một trong những cách sạch nhất và linh hoạt nhất là sử dụng Mẫu chữ .

Một lợi thế của việc sử dụng này là, nếu bạn muốn hiển thị nội dung của biến chuỗi trong thân văn bản, nó sẽ sạch hơn và thẳng hơn.

(Xin lưu ý cách sử dụng các ký tự backtick)

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

Sẽ dẫn đến

Hi~
This is a test message

Trong trường hợp bất cứ ai đang tìm kiếm một giải pháp mà bạn muốn có một dòng mới cho mỗi chuỗi trong một mảng, bạn có thể làm một cái gì đó như thế này:

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

Xem đồ ăn nhẹ để xem ví dụ trực tiếp: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

Chỉ cần sử dụng {"\ n"} nơi bạn muốn ngắt dòng

Một cách khác để chèn <br>giữa các dòng văn bản được xác định trong một mảng:

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

Sau đó, văn bản có thể được sử dụng như là biến:

<Text>{textContent}</Text>

Nếu không có sẵn, Fragmentcó thể được định nghĩa theo cách này:

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

https://stackoverflow.com/a/44845810/10480776 Câu trả lời của @Edison D'souza chính xác là những gì tôi đang tìm kiếm. Tuy nhiên, nó chỉ thay thế lần xuất hiện đầu tiên của chuỗi. Đây là giải pháp của tôi để xử lý nhiều <br/>thẻ:

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

Xin lỗi, tôi không thể nhận xét về bài đăng của anh ấy do giới hạn điểm danh tiếng.

Đây là một giải pháp cho React (không phải React Native) bằng TypeScript.

Khái niệm tương tự có thể được áp dụng cho 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;

Sử dụng:

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

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

Hiển thị:

Sử dụng \ntrong văn bản và csswhite-space: pre-wrap;