我想在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.
当前回答
在需要换行的地方使用{"\n"}
其他回答
这是一个很好的问题，你可以用多种方法来做这个问题 第一个
<View>
<Text>
Hi this is first line {\n} hi this is second line
</Text>
</View>
这意味着您可以使用{\n}反斜杠n来断行
第二个
<View>
<Text>
Hi this is first line
</Text>
<View>
<Text>
hi this is second line
</Text>
</View>
</View>
这意味着你可以使用另一个<查看>组件里面首先<查看>和包装它周围<文本>组件
快乐的编码
在需要换行的地方使用{"\n"}
这应该做到:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
简单使用反勾号(es6特性)
解决方案1
const Message = 'This is a message';
<Text>
{`
Hi~
${Message}
`}
</Text>
解决方案2在文本中添加“\n”
<Text>
Hi~{"\n"}
This is a message.
</Text>
如果你从状态变量或道具中获取数据，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%的文本
