简体   繁体   中英

how can i add Line break in JSON?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM