如何防止换行/断句：响应本机

Question

我必须防止将两个单词的句子（“ 查看更多”，请参见图片）包装为链接，链接中的单词需要在一起。 React native在CSS中不支持空白属性，因此需要一个解决方案！参见下图：

另请参见代码结构：

<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

<View style={styles.rewardsAction}>
  <View style={{flexDirection:'row',flexWrap:'wrap'}}>
   <View>
      <Text style={styles.rewardsInfo}>AED 20 of 100 can be redeemed.</Text>
   </View>
   <View>   
     <Text style={styles.viewmore} numberOfLines={1}>View More</Text>
   </View>
  </View>
  <Text style={styles.rewardsApply}>Apply</Text>
</View>

您可能会有类似上面的内容。如果有空间，则“查看更多”将在同一行中出现，否则它将移至下一行。

Answer 2

您使用的是棒状文本，因此JustifyContent无法正常工作。而是尝试像这样绑定View标签。

<View style={{flex: 'row', JustifyContent: 'space-between'}>
     <View>  
         <Text>AED 20 of 100 can be redeemed.</Text> 
     </View>

     <View>
          <Text>View More</Text>
     </View>

     <View>
          <Text style={{color:'red'}}>Apply</Text>
     </View>

</View>

在文本标签中尝试不应用其他样式，例如宽度等，而在视图标签中使用。

Answer 3

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

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