React Native中使用文本组件的坚不可摧的行

Question

是否可以在代码中修复此问题？我希望文本170km/h始终保持在同一行。

我尝试在html页面中重现问题并且这个问题不存在，只是在做出反应。参见：

p {
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px
}

p.first {
  width: 181px;
}

p.second {
  width: 180px;
}

<p class='first'>
I want that the text 170km/h stay always in the same line.
</p>
<p class='second'>
I want that the text 170km/h stay always in the same line.
</p>

现在我的React代码！你可以在这里看到它：https://snack.expo.io/ryaIT4ExQ

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Hi! I'm a text and I'm inside a Text Component and I want that 170km/h stay always in the same line. How what I need do to make this?
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    backgroundColor: "red",
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ffffff',
  },
});

Answer 1

似乎现在还没有添加nowrap属性（顺便说一句，Sacha必须在这里使用该跨度建议来省略原生部分）。到目前为止，我发现的唯一解决方案是将斜杠符号更改为HTML entity，如图所示here。我意识到它看起来有点不同，但是，它确实有效。猜猜我们必须使用它，直到本机JSS正常工作。

Answer 2

我会将170km/h放在一个范围内并给它white-space: nowrap

I want that the text <span style="white-space: nowrap">170km/h</span> stay always in the same line.

https://css-tricks.com/forums/topic/prevent-word-breaks/

Answer 3

只需为文本样式添加道具 flexWrap: '包裹',