ฉันจะแทรกตัวแบ่งบรรทัดลงในคอมโพเนนต์ <Text> ใน React Native ได้อย่างไร

ฉันต้องการที่จะแทรกบรรทัดใหม่ (เช่น \ r \ n, <br />) ในองค์ประกอบข้อความใน React Native

ถ้าฉันมี:

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

จากนั้นตอบสนองการแสดงผลพื้นเมือง Hi~ this is a test message.

เป็นไปได้ไหมที่จะแสดงข้อความเพื่อเพิ่มบรรทัดใหม่เช่น:

Hi~
this is a test message.

สิ่งนี้ควรทำ:

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

คุณยังสามารถทำสิ่งต่อไปนี้

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

ง่ายขึ้นในความคิดของฉันเพราะคุณไม่จำเป็นต้องใส่สิ่งต่าง ๆ ในสาย; เพียงแค่ห่อมันหนึ่งครั้งและมันจะทำให้เส้นแบ่งของคุณ

ใช้:

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

ผลลัพธ์:

สวัสดี

เคอร์ติ!

สิ่งนี้ใช้ได้สำหรับฉัน

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

(ตอบสนองพื้นเมือง 0.41.0)

หากคุณกำลังแสดงข้อมูลจากตัวแปรสถานะให้ใช้สิ่งนี้

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

คุณสามารถใช้{'\n'}เป็นตัวแบ่งบรรทัด สวัสดี ~ {'\ n'} นี่คือข้อความทดสอบ

ดีกว่า: ถ้าคุณใช้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>
  );
 }

}

คุณสามารถลองใช้สิ่งนี้

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

ฉันต้องการวิธีแก้ปัญหาแบบบรรทัดเดียวในผู้ประกอบการที่ประกอบไปด้วยสามส่วนเพื่อให้รหัสของฉันเยื้องอย่างดี

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

การเน้นไวยากรณ์แบบประเสริฐช่วยให้ไฮไลต์อักขระตัวแบ่งบรรทัด:

คุณสามารถใช้ `` เช่นนี้:

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

คุณสามารถทำได้ดังนี้

{'สร้าง \ n บัญชีของคุณ'}

คุณยังสามารถเพิ่มเป็นค่าคงที่ในวิธีการเรนเดอร์ของคุณเพื่อนำมาใช้ใหม่ได้ง่าย:

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

เพียงใส่{'\n'}ในแท็กข้อความ

<Text>

   Hello {'\n'}

   World!

</Text>

หนึ่งในวิธีที่สะอาดและยืดหยุ่นที่สุดคือการใช้เทมเพลตตัวอักษรแม่แบบตัวอักษร

ข้อได้เปรียบของการใช้สิ่งนี้คือถ้าคุณต้องการแสดงเนื้อหาของตัวแปรสตริงในเนื้อหาข้อความมันจะสะอาดและตรงไปตรงมา

(โปรดทราบการใช้อักขระ backtick)

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

จะส่งผลให้

Hi~
This is a test message

ในกรณีที่ทุกคนกำลังมองหาวิธีแก้ปัญหาที่คุณต้องการมีบรรทัดใหม่สำหรับแต่ละสตริงในอาเรย์คุณสามารถทำสิ่งนี้:

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

ดูขนมขบเคี้ยวสำหรับตัวอย่างสด: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

เพียงแค่ใช้ {"\ n"} ที่คุณต้องการแยกบรรทัด

อีกวิธีในการแทรก<br>ระหว่างบรรทัดข้อความที่กำหนดไว้ในอาร์เรย์:

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>

หากไม่พร้อมใช้งานFragmentสามารถกำหนดได้ด้วยวิธีนี้:

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

https://stackoverflow.com/a/44845810/10480776 @ คำตอบของ Edison D'souza เป็นสิ่งที่ฉันกำลังมองหา อย่างไรก็ตามมันเป็นเพียงการแทนที่เกิดขึ้นครั้งแรกของสตริง นี่คือทางออกของฉันในการจัดการหลาย<br/>แท็ก:

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

ขออภัยฉันไม่สามารถแสดงความคิดเห็นในโพสต์ของเขาเนื่องจากข้อ จำกัด ของคะแนนชื่อเสียง

นี่คือโซลูชันสำหรับ 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>

แสดง:

ใช้\nในข้อความและ csswhite-space: pre-wrap;