时间戳

首页 > 解决方案 > 如何防止换行/断句：反应原生

css - 如何防止换行/断句：反应原生

问题描述

我必须防止将两个单词的句子（'查看更多'，参见图片）包装为它的单词需要放在一起的链接。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'},

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

编辑：我在下面得到了一些答案，我认为存在一些混淆，查看更多文本应该在那一行中或者应该放在下面，“应用”文本向右分开，“查看更多”应该与那个句子！

标签： cssreact-native

解决方案

&nbsp;在 JSX 中的静态文本中使用。

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

推荐阅读