جاوااسکریپت - چگونه میتوانم یک شکست خط در یک کامپوننت در React Native وارد کنم؟

من میخواهم یک خط جدید (مثل \r\n, <br />) در یک کامپوننت Text در 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.

پاسخ شماره ۱

این باید کار را انجام دهد:

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

پاسخ شماره ۲

شما همچنین میتوانید انجام دهید:

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

به نظر من راحتتر است، چون نیازی نیست چیزها را داخل رشته وارد کنید؛ فقط یک بار آن را بپیچانید و همه شکست خطهای شما را حفظ میکند.

پاسخ شماره ۳

استفاده کنید :

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

نتیجه :

سلام،

کرتیس!

پاسخ شماره ۴

راه حل ۱:

<Text>
  line 1{"\n"}
  line 2
</Text>

راه حل ۲:

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

راه حل ۳:

این راهحل من برای مدیریت چندین تگ <br/> بود:

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

راه حل ۴:

برای شکست خودکار خط از maxWidth استفاده کنید

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

پاسخ شماره ۵

این برای من جواب داد

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

(ریاکت-نیتیو ۰.۴۱.۰)

پاسخ شماره ۶

اگر اصلاً در حال نمایش دادهها از متغیرهای وضعیت هستید، از این استفاده کنید.

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

پاسخ شماره ۷

شما میتوانید از {'\n'} به عنوان شکست خط استفاده کنید. سلام~ {'\n'} این یک پیام آزمایشی است.

پاسخ شماره ۸

https://stackoverflow.com/a/44845810/10480776 جواب @Edison D'souza دقیقاً همان چیزی بود که من دنبال آن بودم. با این حال، تنها اولین مورد از رشته را جایگزین میکرد. راهحل من برای مدیریت چندین تگ <br/> به این صورت بود:

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

متأسفم، به دلیل محدودیت امتیاز شهرت نتوانستم روی پست او نظر بدهم.

پاسخ شماره ۹

ویرایش :

اگر از قالبهای متنی (Template Literals) استفاده کنید (رجوع کنید به داخل المان <Text>

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

پاسخ شماره ۱۰

در جایی که میخواهید تغییر خط داشته باشید از {"\n"} استفاده کنید