আমি কীভাবে প্রতিক্রিয়া নেটিভের <টেক্সট> উপাদানটিতে একটি লাইন বিরতি sertোকাতে পারি?

Question

আমি প্রতিক্রিয়া নেটিভের একটি পাঠ্য উপাদানটিতে একটি নতুন লাইন (\ r \ n, <br /> এর মতো) সন্নিবেশ করতে চাই।

যদি আমার থাকে:

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

তারপরে রিয়েট করুন নেটিভ রেন্ডারগুলি Hi~ this is a test message.

এটির মতো কোনও নতুন লাইন যুক্ত করা কি পাঠ্য রেন্ডার করা সম্ভব:

Hi~
this is a test message.

Comments

আপনি \nযেখানে লাইনটি ভাঙতে চান সেখানে ব্যবহার করতে পারেন ।

— স্যাম009

Answer 1

এটি করা উচিত:

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

Comments

সেখানে পরিবর্তনশীল থেকে স্ট্রিং সঙ্গে এটা করতে তাই আমি ব্যবহার করতে পারে একটি উপায় আছে কি: <Text>{content}</Text>?

— রোমান Sklenar

। n লাইন বিরতি

— ক্রিস ঘিনিয়া

এর জন্য ধন্যবাদ. আমি দ্রুত অ্যাক্সেসের জন্য একটি লাইন ব্রেক উপাদান তৈরি করে শেষ করেছি var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })

— জোনাথন লকলি

পাঠ্যটি যদি স্ট্রিং ভেরিয়েবলের হয়? <Text>{comments}</Text>আমরা {\n}সেখানে যুক্তি ব্যবহার করতে পারি না । তারপর কিভাবে?

— ব্যবহারকারী 2078023

পাঠ্যটি যদি কোনও প্রপ থেকে আসে তবে নিশ্চিত হয়ে নিন যে আপনি এটিটি পাস করেছেন: <Component text={"Line1\nLine2"} />পরিবর্তে <Component text="Line1\nLine2" />(যুক্ত হওয়া কোঁকড়ানো ধনুর্বন্ধনীগুলি লক্ষ্য করুন)

— কিওয়ার্টজগুয়ে

Answer 2

আপনি এটি করতে পারেন:

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

আমার মতে আরও সহজ, কারণ স্ট্রিংয়ের মধ্যে আপনাকে স্টাফ প্রবেশ করতে হবে না; কেবল একবার এটি মুড়ে রাখুন এবং এটি আপনার সমস্ত লাইন-ব্রেকগুলি রাখে।

Comments

এটি এখন পর্যন্ত সবচেয়ে পরিষ্কার সমাধান, একসাথেwhite-space: pre-line;

— টমসজ মুলারসাইকেক

@ টমাসজ: আমার মনে হয় কোনও শ্বেত স্থান বা হোয়াইটস্পেস নেই: <টেক্সট> এর জন্য স্টাইলশীট -অ্যাক্ট-নেটিভ ট্যাগ - বা আমি ভুল করছি?

— সুত্রে

টেমপ্লেট লিটারেলগুলি স্বচ্ছ এবং স্বীকৃত উত্তরের সাথে তুলনা করে

— হেমাদ্রি দশারি

আমার ধারণা শ্বেত-শৈলীর শৈলীর মনে হ'ল অভ্যাস ফাঁস হবে না, তাই না? যদি হ্যাঁ, আমার এটির মারাত্বক প্রয়োজন, অন্যথায় স্ট্রিং লিটারালরা অত্যন্ত কুৎসিত হয় ...

— জেরাস

@ জেরুস আপনি এখানে ইন্ডেন্টেশনটি সরাতে কেবল একটি টেক্সট পোস্ট প্রসেসর ব্যবহার করতে পারেন: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c

— ভেন্রিক্স

Answer 3

ব্যবহার করুন:

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

ফলাফল:

ওহে,

কার্টিস!

Comments

বার্তাটি যখন স্ট্রিং ভেরিয়েবল হয় তখন এটি কাজ করছে না বলে মনে হচ্ছে: <পাঠ> {বার্তা

— T

আপনি এই জাতীয় ফাংশনটি ব্যবহার করতে পারেন: স্প্লিটলাইন = বার্তা => {...} এবং এতে রেজিপ্যাক্স, তারপরে <টেক্সট>। এই.স্প্লিটলাইন (বার্তা)} </

— txt

Answer 4

এটি আমার পক্ষে কাজ করেছে

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

(দেশীয় 0.41.0 প্রতিক্রিয়া)

Answer 5

যদি আপনি মোটেও রাষ্ট্রের ভেরিয়েবলগুলি থেকে ডেটা প্রদর্শন করছেন তবে এটি ব্যবহার করুন।

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

Answer 6

আপনি {'\n'}লাইন ব্রেক হিসাবে ব্যবহার করতে পারেন । হাই ~ {'\ n'} এটি একটি পরীক্ষার বার্তা।

Answer 7

আরও ভাল: আপনি যদি ব্যবহার করেন তবে আপনি 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>
  );
 }

}

Comments

স্টাইলযুক্ত উপাদানগুলির সাথে এটির কোনও সম্পর্ক নেই এবং আপনি সেগুলি ব্যবহার করেন বা না করেন তা কার্যকর হবে না।

— কুবা জাগোদা

Answer 8

আপনি এটি ব্যবহার করার চেষ্টা করতে পারেন

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

Answer 9

আমার কোডটি সুন্দরভাবে ইন্টেন্টেড রাখার জন্য আমার একটি টেরিনারি অপারেটরে এক-লাইন সমাধান শাখা করা দরকার।

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

সাব্লাইম সিনট্যাক্স হাইলাইটিং লাইন-ব্রেক চরিত্রটি হাইলাইট করতে সহায়তা করে:

Answer 10

আপনি এই জাতীয় ব্যবহার করতে পারেন:

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

Answer 11

আপনি নিম্নলিখিত হিসাবে এটি করতে পারেন:

{'আপনার অ্যাকাউন্ট তৈরি করুন' '

Comments

এটি এখানেও ফর্ম কাজ করেছে <শিরোলেখ শিরোলেখ পাঠ = Muhammad 'মুহম্মদ Tay n তৈয়ব \ n রানা' H subHeadline = "ওয়েব বিকাশকারী এবং ডিজাইনার" />

— মুহাম্মাদ তাইয়েব

Answer 12

আপনি এটিকে কেবল আপনার রেন্ডার পদ্ধতিতে একটি ধ্রুবক হিসাবে যুক্ত করতে পারেন যাতে এর পুনরায় ব্যবহার করা সহজ:

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

Answer 13

শুধু {'\n'}পাঠ্য ট্যাগের মধ্যে রাখুন

<Text>

   Hello {'\n'}

   World!

</Text>

Answer 14

অন্যতম পরিষ্কার এবং সবচেয়ে নমনীয় উপায় হ'ল টেম্পলেট লিটারাল ব্যবহার করা ।

এটি ব্যবহার করার একটি সুবিধা হ'ল আপনি যদি পাঠ্য শরীরে স্ট্রিং ভেরিয়েবলের সামগ্রী প্রদর্শন করতে চান তবে এটি ক্লিনার এবং সোজা এগিয়ে straight

(দয়া করে ব্যাকটিক অক্ষরের ব্যবহারটি নোট করুন)

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

ফলাফল হবে

Hi~
This is a test message

Answer 15

যদি কেউ সমাধানের সন্ধান করে যেখানে আপনি অ্যারেতে প্রতিটি স্ট্রিংয়ের জন্য একটি নতুন লাইন রাখতে চান আপনি এই জাতীয় কিছু করতে পারেন:

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

Answer 16

আপনি যেখানে লাইনটি ভাঙতে চান সেখানে কেবল {"\ n"। ব্যবহার করুন

Answer 17

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

Answer 18

https://stackoverflow.com/a/44845810/10480776 @ এডিসন ডিসোজার উত্তরটি ঠিক আমি যা খুঁজছিলাম তা ছিল। তবে এটি কেবল স্ট্রিংয়ের প্রথম উপস্থিতিকে প্রতিস্থাপন করছে। একাধিক <br/>ট্যাগ হ্যান্ডল করার জন্য আমার সমাধানটি এখানে ছিল :

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

দুঃখিত, খ্যাতি স্কোর সীমাবদ্ধতার কারণে আমি তাঁর পোস্টে মন্তব্য করতে পারিনি।

Answer 19

টাইপস্ক্রিপ্ট ব্যবহার করে প্রতিক্রিয়ার (দেশটির প্রতিক্রিয়া নয়) এর একটি সমাধান এখানে।

রিএ্যাক্ট নেটিভ ক্ষেত্রে একই ধারণাটি প্রয়োগ করা যেতে পারে

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>

প্রদর্শন করা হয়:

Answer 20

\nপাঠ্য এবং CSS এ ব্যবহার করুনwhite-space: pre-wrap;

Comments

আমি whiteSpaceএকটি প্রতিক্রি নেটিভ টেক্সট স্টাইল প্রোপ হিসাবে তালিকাভুক্ত দেখতে পাচ্ছি না । মনে রাখবেন যে এটি এইচটিএমএল নয়।

— বিনকি

রেফারেন্সের জন্য এটি জেএসকে প্রতিক্রিয়া দেখায়। অন্যরা কোনও কারণে আমার পক্ষে কাজ করছে না।

— হিমাংশুআরোরা9419