मैं रिएक्टिव नेटिव में <टेक्स्ट> घटक में एक लाइन ब्रेक कैसे सम्मिलित कर सकता हूं?

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जहां आप लाइन को तोड़ना चाहते हैं।

— Sam009

Answer 1

यह करना चाहिए:

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

Comments

वहाँ चर से स्ट्रिंग के साथ ऐसा करने का एक तरीका है तो मैं उपयोग कर सकता है <Text>{content}</Text>:?

— रोमन स्केलेनार

\ n एक लाइन ब्रेक है

— क्रिस गेनिया

इसके लिए धन्यवाद। मैंने जल्दी पहुंच के लिए एक लाइन ब्रेक घटक बना दिया var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })

— जोनाथन लॉकली

क्या होगा यदि पाठ एक स्ट्रिंग चर में है? <Text>{comments}</Text>हम {\n}वहां तर्क का उपयोग नहीं कर सकते । फिर कैसे?

— user2078023

यदि पाठ एक प्रस्ताव से आता है, तो सुनिश्चित करें कि आप इसे इस तरह से पास करते हैं: <Component text={"Line1\nLine2"} />इसके बजाय <Component text="Line1\nLine2" />(नोटिस किए गए घुंघराले ब्रेसिज़)

— qwertzguy

Answer 2

आप भी कर सकते हैं:

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

मेरी राय में आसान है, क्योंकि आपको स्ट्रिंग के भीतर सामान डालने की ज़रूरत नहीं है; बस इसे एक बार लपेटें और यह आपके सभी लाइन-ब्रेक रखता है।

Comments

यह अब तक का सबसे साफ समाधान है, साथ मेंwhite-space: pre-line;

— टॉमाज़ मूलारज़ी

@ टॉमाज़: मुझे लगता है कि कोई व्हाइट-स्पेस या व्हाइटस्पेस नहीं है: -Stylesheet के लिए <टेक्स्ट> -टेग इन रिएक्शन-देशी - या क्या मैं गलत हूं?

— सुथेर

टेम्प्लेट शाब्दिक रूप से स्वीकृत उत्तर की तुलना में स्वच्छ और साफ हैं

— हेमाद्री दासारी

मुझे लगता है कि सफेद-अंतरिक्ष शैली का इरादा रिक्त स्थान को हटाने का है? यदि हाँ, तो मुझे इसकी सख्त ज़रूरत है, अन्यथा स्ट्रिंग शाब्दिक सुपर बदसूरत हो जाते हैं ...

— ज़ेरुस

: @Xerus तुम बस के रूप में यहाँ देखा, खरोज दूर करने के लिए एक पाठ के बाद प्रोसेसर का उपयोग कर सकते gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c

— Venryx

Answer 3

उपयोग:

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

परिणाम:

नमस्ते,

कर्टिस!

Comments

ऐसा लगता है कि जब संदेश एक स्ट्रिंग चर है तो काम नहीं कर रहा है: <Text> {message} </ पाठ>

— user2078023

आप इस तरह से फंक्शन का उपयोग कर सकते हैं: स्प्लिटलाइन = संदेश => {...} और इसमें RegExp, फिर <Text> {this.splitLine (संदेश)} </ पाठ>

— CODek

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

आप इसे निम्नानुसार कर सकते हैं:

{"खाता बनाएं \ n आपका खाता '}

Comments

इसने यहां फॉर्म के साथ ही काम किया <Header headerText = {'Muhammad \ n तय्यब \ n राणा'} subHeadline = "वेब डेवलपर और डिज़ाइनर" />

— मुहम्मद tayyab

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

सबसे साफ और सबसे लचीले तरीके में से एक टेम्पलेट साहित्य का उपयोग किया जाएगा ।

इसका उपयोग करने का एक फायदा यह है कि, यदि आप टेक्स्ट बॉडी में स्ट्रिंग चर की सामग्री को प्रदर्शित करना चाहते हैं, तो यह क्लीनर और सीधे आगे है।

(कृपया बैकटिक वर्णों के उपयोग पर ध्यान दें)

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पाठ और सीएसएस में उपयोग करेंwhite-space: pre-wrap;

Comments

मैं whiteSpaceएक प्रतिक्रियाशील मूल पाठ शैली प्रस्ताव के रूप में सूचीबद्ध नहीं देखता । ध्यान दें कि यह HTML नहीं है।

— binki

संदर्भ के लिए यह प्रतिक्रिया जेएस में काम करता है। अन्य किसी कारण से मेरे लिए काम नहीं कर रहे हैं।

— हिमांशु अरोरा