我想在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.
当前回答
2021，这适用于REACT状态值(你必须添加空divs，就像返回语句一样)
这一点。setState({form:(<> line 1 <br /> line 2 </>)})
其他回答
2021，这适用于REACT状态值(你必须添加空divs，就像返回语句一样)
这一点。setState({form:(<> line 1 <br /> line 2 </>)})
你也可以把它作为一个常量添加到你的渲染方法中，这样很容易重用:
render() {
const br = `\n`;
return (
<Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
)
}
这样做:
<文本> {“嗨，这是一个测试消息。”｝ <文本/ >
最干净和最灵活的方法之一是使用模板字面量。
使用它的一个优点是，如果你想在文本体中显示字符串变量的内容，它更干净和直接。
(请注意使用反引号)
const customMessage = 'This is a test message';
<Text>
{`
Hi~
${customMessage}
`}
</Text>
会导致
Hi~
This is a test message
为什么这么努力工作?现在是2020年，创建一个组件来处理这类问题
export class AppTextMultiLine extends React.PureComponent {
render() {
const textArray = this.props.value.split('\n');
return (
<View>
{textArray.map((value) => {
return <AppText>{value}</AppText>;
})}
</View>
)
}}
