Как вставить перенос строки в компоненте <Text> в React Native?
Я хочу вставить новую строку (например, \r\n или <br />) в компонент Text в React Native.
Если у меня есть следующий код:
<Text>
<br />
Hi~<br />
this is a test message.<br />
</Text>
То React Native отображает Hi~ this is a test message.
Возможно ли отобразить текст с новой строкой следующим образом:
Hi~
this is a test message.
Как можно решить эту проблему?
5 ответ(ов)
Это должно сработать:
<Text>
Привет~{"\n"}
это тестовое сообщение.
</Text>
Вы также можете сделать это следующим образом:
<Text>{`
Привет~
это тестовое сообщение.
`}</Text>
На мой взгляд, это проще, так как вам не нужно вставлять символы для переноса строк; просто обрамите текст один раз, и все ваши переносы строк сохранятся.
Для достижения желаемого результата с использованием компонента <Text> в React Native, вы можете вставить перенос строки с помощью символа \n. Вот пример кода, который вы можете использовать:
<Text>{`Hi,\nCurtis!`}</Text>
Этот код отобразит текст следующим образом:
Hi,
Curtis!
Таким образом, текст "Hi," будет на одной строке, а "Curtis!" на следующей, как и ожидалось.
Решение 1:
<Text>
строка 1{"\n"}
строка 2
</Text>
Решение 2:
<Text>{`
строка 1
строка 2
`}</Text>
Решение 3:
Вот как я решил задачу обработки нескольких тегов <br/>:
<Text style={{ whiteSpace: "pre-line" }}>
{"Привет<br/> это тестовое сообщение.".split("<br/>").join("\n")}
</Text>
Решение 4:
Используйте maxWidth для автоматического переноса строк:
<Text style={{ maxWidth: 200 }}>это тестовое сообщение. это тестовое сообщение</Text>
Это сработало для меня:
<Text>{`Привет~\nэто тестовое сообщение.`}</Text>
(react-native 0.41.0)
В чем разница между React Native и React?
В чем разница между String.slice и String.substring?
Проверка соответствия строки регулярному выражению в JS
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?
Как создать диалог с кнопками "Ок" и "Отмена"