Я хочу вставить новую строку (например, \r\n,
) в компонент Text в React Native.
Если у меня есть:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Тогда React Native выдает Привет~ это тестовое сообщение
.
Можно ли сделать так, чтобы текст добавлял новую строку?
Hi~
this is a test message.
Это должно помочь:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
Использование:
<Text>{`Hi,\nCurtis!`}</Text>
Результат:
Привет,
Кертис!
Если вообще отображаются данные из переменных состояния, используйте это.
<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
Вы можете использовать {'\П'}
как разрывы строк.
в <текст>
Привет~ {'\П'} это тестовое сообщение.
</текст>
Еще лучше: если вы используете `стиле-компонентов , вы можете сделать что-то вроде этого:
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>
);
}
}
Вы можете попробовать использовать такой
<text>{`${val}\n`}</text>
Мне нужен один-лайн решение ветвления в тернарный оператор, чтобы держать мой код красиво изрезана.
{foo ? `First line of text\nSecond line of text` : `Single line of text`}
Возвышенное подсветка синтаксиса помогает выделить линию-брейк характер:
Вы можете сделать это следующим образом:
в <текст>{'создать\nYour счета'}</текст>
Просто положить {'\П'}
в тексте тег
<Text>
Hello {'\n'}
World!
</Text>
В случае, если кто-то ищет решение, где вы хотите иметь новую строку для каждой строки в массив, вы могли бы сделать что-то вроде этого:
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
я'м, используя реагировать JS. ни один из вышеперечисленных ответов не работал для меня в покое, но в сочетании. надо, наверное, работать на родной. код ниже,
//реагировать JS
<div style={{ whiteSpace: 'pre-wrap' }}>
<text>{`hello \nthere`}</text>
</div>
//родной (Не'т проверял, но технически должно работать..)
<View style={{ whiteSpace: 'pre-wrap' }}>
<Text>{`hello \nthere`}</Text>
</View
Просто используйте {" и\Н", У}, где вы хотите, чтобы сломать линию
Использовать \N
в тексте и CSS бело-пространстве: предварительно обертывание;