React Native Text Components：如何组合 url 和其他字符串？

Question

I have a url format like http://abc.go.com or http://abc.go.com .

In React Native, i have a <Text>...</Text> to contain some child <Text>...</Text>

My structure is below :

<Text>
    <Text>
      My homepage is a link like : 
    </Text>
    <Text>
      http://abc.go.com
    </Text>
    <Text>
      Welcome Welcome
    </Text>
</Text>

In small size Device to check, it shows the below result :

My homepage is a link like : http://
abc.go.com Welcome Welcome

this result is not my want. (If one line is not enough to show url) I want the result should be:

My homepage is a link like : 
http://abc.go.com Welcome Welcome

My question is how to combine of a whole url with 'http://' prefix with other strings?

My environment is React Native, JavaScript

Answer 1

A simple solution could be the following

<Text>
    <Text style={{flex:1}}>
        My homepage is a link like : 
    </Text>
    <Text>
        http://abc.go.com
    </Text>
    <Text>
       Welcome Welcome
     </Text>
</Text>

But this would make

My homepage is a link like:

always take up a whole line on screen which might not suite all use cases if you would give a bit more detailed description I could think of a more universal solution.

Answer 2

You can force a line break by inserting the newline character at the position where you don't want another text to appear.

<Text>
  <Text>
    `My homepage is a link like :{'\r\n'}`
  </Text>
  <Text>
    http://abc.go.com
  </Text>
  <Text>
    Welcome Welcome
  </Text>
</Text>

PS I could not entirely reproduce your error. In my case the separate inner Text components were all in a separate line.