Как отобразить в React Native разрыв строки внутри строки, полученной из базы данных?
Я не могу заставить разрывы строк работать внутри строковой переменной с React Native. В моей базе данных есть документы с полем name. Имя — это строка. Имя может содержать определенные разрывы строк. Данные извлекаются в моем компоненте React Native и отображаются в FlatList.
Я пробовал различные комбинации:
- \n
- {'\n'}
Ни один из них не работает, разрыв строки отображается как текст
\\ In database document
name: "Some\ntitle"
\\ or
name: "Some{'\n'}title"
\\ In React Native (simplified)
<FlatList
renderItem = {
<Text>{item.name}<\Text>
}
>
<\FlatList>
Это отображается как:
Какое-то\nназвание или Какое-то{'\n'}название
Вместо:
Какой
название
----------- РЕШЕНИЕ -----------
// В базе данных
name: "Некоторые\nназвания"
// В React Native
{элемент.имя.заменить('\n', '\n')}
// Оказывать
Некоторые
заглавие
Нет, как указано в моем вопросе, {'\n'} в этом случае не работает.
В вопросе отсутствует часть, где вы извлекаете строку из базы данных. Вот где проблема, вероятно, должна быть решена.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Используйте {"\n"} вместо \n:
Some{"\n"}text
или
<Text>{`Some\ntext`}</Text>
ваш подход правильный, но как вы это сделаете для динамических данных? как в этом вопросе Some Text исходит из базы данных. Так что будет как item.name. как вы установите item.name в новой строке?
Я уже пробовал это, и это не сработало. Компонент Text является объектом renderItem компонента FlatList. name — это строка, хранящаяся в коллекции mongodb. Что сказал Анкуш Риши
Используйте замену — <Text>{item.name.replace(/\\n/g,'\n')}</Text>
Попробуйте это решение:
{item.name.split("\n").map((i,key) => {
return <Text key = {key}>{i}</Text>;
})}
Попробуйте стилизовать компонент с помощью style = {{ whiteSpace: "pre" }}, чтобы сохранить пробелы.
<Text style = {{ whiteSpace: "pre" }}>{item.name}</Text>
whiteSpace не является свойством React Native
Вы можете попробовать так:
<Text>{`{item.name}`}</Text>
Спасибо, но это непрактично: когда элементы списка являются документами из базы данных, содержимое не жестко запрограммировано, это компонент, разрыв строки должен быть закодирован в документе, а затем отображаться в React Native.
нет, я думал об этом, но обозначения внутри компонента ничего не меняют: <Component>{item.name}</Component> тот же результат, что и <Component>{{item.name}}</Component>
Можете ли вы поделиться своими требованиями или кодом?
Можете ли вы попробовать это решение: мы протестировали его, и я, кажется, работает
var str = item.name;
var result = str.split("\n");
return result.map((i, key) => <Text key = {key}>{i + "\n"}</Text>);
Я только что обновил код, и он работает для меня. пожалуйста, проверьте
Я полагаю, что это должно работать и для меня (хотя решение estus кажется лучше), но мне не удается интегрировать его с моим FlatList
То, что \n перевод строки появляется буквально означает, что он был экранирован в какой-то момент, на самом деле это \\n.
Можно {item.name.replace('\\n', '\n')}.
Фактическая проблема в том, что он вообще сбежал. Это может повлиять на другие escape-последовательности и должно решаться в том месте, где была экранирована строка.
Ты сделал это! Кто настоящий игрок? Кто настоящий MVP??
Рад, что это помогло. Я бы предложил проверить, почему строка была экранирована при извлечении из БД, могут быть и другие символы, требующие обработки.
Ага, подойдет. Спасибо за ваше время ?
Я ответил на это за 30 минут до этого в комментарии ниже. stackoverflow.com/questions/55410052/…
@lawrencealan Я не проверяю другие ответы тщательно, поэтому я не знал о комментарии. Я не считаю SO конкуренцией; Я просто дал решение и объяснение. В любом случае, комментарий должен быть частью вашего ответа, потому что это настоящая проблема.
Это явно соревнование, есть система подсчета очков и таблицы лидеров :) — мой ответ ответил на его первоначальный вопрос, но он со временем расширил рамки, на что я расширил свой ответ и ждал его ответа, вместо того, чтобы ответить на мой комментарий, он принял ваш ответ, что то же самое. Все хорошо, просто стоит отметить.
Используя регулярное выражение, замените все \\n на \n
const t = d.replace(/\\n/g, "\n");
Возможный дубликат Как вставить разрыв строки в компонент <Text> в React Native?