What I'm trying to do is that I want to add a line break between
remoteMessage.notification.title + remoteMessage.notification.body
title and body
If I use my code screen view show like this
this is my code
useEffect(() => {
const unsubscribe = messaging().onMessage(async (remoteMessage) => {
console.log(JSON.stringify(remoteMessage));
Alert.alert(
"A new FCM message arrived!",
JSON.stringify(
remoteMessage.notification.title + remoteMessage.notification.body
)
);
});
return unsubscribe;
}, []);
How can I fix my code? if I want to show like this?
title
body
You can use \n
, otherwise, You can try with <br/>
between two texts.
useEffect(() => {
const unsubscribe = messaging().onMessage(async (remoteMessage) => {
console.log(JSON.stringify(remoteMessage));
Alert.alert(
"A new FCM message arrived!",
JSON.stringify(
remoteMessage.notification.title +"<br/>"+ remoteMessage.notification.body
)
);
});
return unsubscribe;
}, []);
If you know how to handle CSS (I hope you are a front developer), you can line break it with a combination of css' white-space: break-spaces and '\n'.
your.json file
{
text: "I want to show you \nthe text that is line break."
}
your.css file
p {
white-space: break-spaces;
}
Maybe it looks like this.
I want to show you
the text that is line break.
You can use \n
and white-space: pre-line;
CSS :
const text = "Title\nBody" function App() { return <div className="pre-line">{text}</div> } ReactDOM.render(<App />, document.getElementById('root'))
.pre-line { white-space: pre-line; }
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <body> <div id="root"></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.