React Native 0.52.0 - 当fontWeight设置为粗体时，文本会截断

Question

我刚刚创建了一个新的React Native项目，并且正在处理UI位。我试着在<Text>Hello world!</Text>内写一些文字并且工作正常：

  

Hello world！

但是当我将fontWeight: 'bold'添加到同一个时，它会截断并显示如下内容：

  

赫尔..

我只在android中测试了这个。

我的React项目版本详情：

  

react-native-cli：2.0.1

     

react-native：0.52.0

我不知道为什么文本会截断自己。这是0.52.0中的已知问题，因为我一直在使用相同的方法将文字设置为粗体，而问题从未在0.48.2中出现

修改 我刚刚意识到，当我在一个带有样式属性alignItems: 'center'的内部时，会发生这种情况。我不知道为什么这仍然会发生。这是我的代码：

<View style={{alignItems:'center'}}>
    <Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>

谢谢！

Answer 1

我的同事有同样的问题，我们通过更改字体（通过font-family）解决了问题。很可能是反应中的错误...

Answer 2

如果要逐行显示内容，则可以在视图级别使用flex:1和flexDirection:"column"。像这样：-

<View style={{flex:1, flexDirection:"column"}}>
    <Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
</View>

，或者如果您不想使用flexDirection，则可以使用alignSelf: 'stretch', textAlign: 'center'。像这样：-

 <View style={{ alignSelf: 'stretch', textAlign: 'center'}}>
        <Text style={{fontWeight: 'bold'}}>Helloworld!</Text>
    </View>

Answer 3

您可以在flexGrow:1元素上使用Text，例如：

<Text style={{flexGrow:1, fontWeight:'bold'}}> General Checkup </Text>