Question

每当我在元素中放入一个超过5个字符的字符串时，最后一个字符串不会被渲染。这是我的代码和输出的字符串。

const Header = () => {
    const { textStyles, viewStyles } = styles;

    return (
        <View style={viewStyles}>
            <Text style={textStyles}>Albums</Text>        
        </View>
    );
};

const styles = {
    viewStyles: {
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20
    },
};

输出字符串： Album

如果我将Text元素中的字符串更改为'Albums!'，则输出将为Albums。它总是显示n-1个字符。

Answer 1

我测试了你的代码伙伴它的工作正常

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

const Header = () => {
  const { textStyles, viewStyles } = styles;

  return (
      <View style={viewStyles}>
          <Text style={textStyles}>Albums!!!!</Text>
      </View>
  );
};
export default class App extends React.Component {

  render() {
    return (
      <View>
        <Header></Header>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewStyles: {
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20
    },
});

这是输出

Answer 2

我在OnePlus 6上遇到了同样的问题。我通过使用textAlign: "center"而不是alignItems: "center"来解决它。

我建议将您的styles更改为：

const styles = {
    viewStyles: {
        backgroundColor: '#F8F8F8',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20,
        textAlign: "center"
    },
};

Answer 3

Manually applying a font may fix this issue

Here's how using expo / Here's how in vanilla react native

如果您不想跟随这些链接，请快速浏览以下内容：

1。获取字体并将其添加到项目中

新建一个文件夹（例如assets/fonts/）来保存字体的ttf文件here's a link to roboto

将.ttf文件直接复制到您创建的目录（例如assets/fonts/Roboto-Regular.ttf）

2。链接字体

将rnpm资产配置添加到您的package.json（使用上面的新文件夹，我们的示例为assets/fonts/，但是您可以使用所需的任何文件夹。

"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
}

在终端上执行react-native link

3。使用您的字体

在上面的示例中，我们使用Roboto，将Roboto替换为您下载的任何字体系列。如果您使用的是Mac，但不知道字体系列，则可以使用font book.app默认应用来查找名称。

<Text style={{ fontFamily: 'Roboto' }}>Some Text Here</Text>

Answer 4

我认为您只需要在文本或父视图中添加宽度

Answer 5

也许您可以将其包裹起来，并为两个标签设置'100％'的宽度。

    <View style={{flex:1,alignItems:'center', justifyContent:'center', width:'100%'}}>
       <Text style={{width:'100%', fontWeight:'bold', fontSize: 12, textAlign:'center'}}> Whatever the text you want to write here..!!</Text>
      </View>

Answer 6

请像这样用空值添加所有组件fontFamily：“”样式。示例：

<Text style={{color:'red', fontFamily: "", fontSize:20}}> Hasan Rıza UZUNER </Text>

React-Native <text>省略最后一个字符

6 个答案:

1。获取字体并将其添加到项目中

2。链接字体

3。使用您的字体