我想在React Native的文本组件中插入一个新行(如\r\n, <br />)。
如果我有:
<text>
<br />
Hi~<br />
this is a test message.<br />
</text>
然后React Native渲染Hi~这是一个测试消息。
它是可能的渲染文本添加一个新的行像这样:
Hi~
this is a test message.
我想在React Native的文本组件中插入一个新行(如\r\n, <br />)。
如果我有:
<text>
<br />
Hi~<br />
this is a test message.<br />
</text>
然后React Native渲染Hi~这是一个测试消息。
它是可能的渲染文本添加一个新的行像这样:
Hi~
this is a test message.
当前回答
在文本和css空格中使用\n: pre-wrap;
其他回答
我使用p标签的新行。这里我粘贴了代码,这对大家都有帮助。
const new2DArr = associativeArr.map((crntVal )=>{
return <p > Id : {crntVal.id} City Name : {crntVal.cityName} </p>;
});
如果你从状态变量或道具中获取数据,Text组件有一个minWidth, maxWidth样式道具。
例子
const {height,width} = Dimensions.get('screen');
const string = `This is the description coming from the state variable, It may long thank this`
<Text style={{ maxWidth:width/2}}>{string}</Text>
这将显示屏幕宽度的50%的文本
在数组中定义的文本行之间插入<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;
你也可以把它作为一个常量添加到你的渲染方法中,这样很容易重用:
render() {
const br = `\n`;
return (
<Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
)
}
简单使用反勾号(es6特性)
解决方案1
const Message = 'This is a message';
<Text>
{`
Hi~
${Message}
`}
</Text>
解决方案2在文本中添加“\n”
<Text>
Hi~{"\n"}
This is a message.
</Text>