Saya ingin menyisipkan baris baru (seperti \r\n, <br />) dalam Teks komponen dalam Bereaksi Asli.
Jika saya memiliki:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Kemudian Bereaksi Asli membuat Hi~ ini adalah tes yang pesan.
Apakah mungkin membuat teks untuk menambahkan baris baru seperti:
Hi~
this is a test message.
Ini harus di lakukan:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
Anda dapat menggunakan {'\n'}
sebagai garis istirahat.
Lebih baik lagi:
jika anda menggunakan gaya-komponen
, anda dapat melakukan sesuatu seperti ini:
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>
);
}
}
Yang saya butuhkan yang satu-line solusi bercabang di ternary operator untuk menjaga kode saya baik menjorok.
{foo ? `First line of text\nSecond line of text` : `Single line of text`}
Luhur sintaks membantu menyoroti line-break karakter:
Dalam kasus ada yang mencari solusi di mana anda ingin memiliki sebuah baris baru untuk setiap string dalam array anda bisa melakukan sesuatu seperti ini:
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>
);
}
}
Melihat snack untuk hidup contoh: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example
i'm menggunakan bereaksi js. tidak ada satupun jawaban diatas tidak bekerja untuk saya saja, tetapi gabungan. mungkin harus bekerja pada asli juga. kode di bawah ini,
//bereaksi js
<div style={{ whiteSpace: 'pre-wrap' }}>
<text>{`hello \nthere`}</text>
</div>
//asli (belum't diuji tetapi, secara teknis harus bekerja..)
<View style={{ whiteSpace: 'pre-wrap' }}>
<Text>{`hello \nthere`}</Text>
</View