css - 如何防止换行/断句 : react native

Question

我必须防止两个单词的句子('查看更多'，见图片)因为它的单词需要放在一起的链接而被换行。 React native 不支持 css 中的 white-space 属性，所以需要一个解决方案!见下图:

另见代码结构:

<View style={styles.rewardsAction}>
  <Text style={styles.rewardsInfo}>AED 20 of 100 can be redeemed.  
     <Text style={styles.viewmore} numberOfLines={1}>View More</Text>
  </Text>
  <Text style={styles.rewardsApply}>Apply</Text>
</View>

及其对应的css:

rewardsAction:{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', borderWidth: 1, borderColor: '#eaeaea', paddingHorizontal: 10, paddingVertical: 10, borderRadius: 10  },
rewardsInfo:{width: '80%'},
rewardsApply:{ color: 'red'},
viewmore: {width: 80, borderWidth: 1, borderColor: '#000', textDecorationLine: 'underline', color: 'skyblue', flexWrap: 'nowrap'},

我也在互联网上搜索过解决方案，但它们与此无关!任何情况下的快速修复也会有所帮助!

编辑: 我在下面得到了一些答案，我认为有些困惑，查看更多文本应该放在同一行中或者应该放在下面，“应用”文本是分开的向右，'查看更多'应该和那句话在一起!

Answer 1

在 JSX 中的静态文本中使用  。

使用 text.replace(/\s/g, '\xa0') 将变量中的空格替换为不间断空格。