React-Native< Text>忽略最后一个字符

u5rb5r59  于 2023-06-24  发布在  React
关注(0)|答案(8)|浏览(105)

每当我在一个元素中放入一个超过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个字符。

pprl5pva

pprl5pva1#

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

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
    },
});

这里是输出

h7appiyu

h7appiyu2#

我在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"
    },
};
h7appiyu

h7appiyu3#

请添加所有组件fontFamily:“”样式就像这样,值为空。示例:

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

yhived7q4#

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>
dojqjjoe

dojqjjoe5#

我认为你只需要增加宽度的文字或父视图

tyu7yeag

tyu7yeag6#

也许你可以把你包在里面,并给两个标签的宽度“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>
xxls0lw8

xxls0lw87#

我不知道它是否仍然相关。
我通过给文本元素增加宽度来解决这个问题

nwlls2ji

nwlls2ji8#

由于我使用的是实体三星SE系列设备,我在Android的设置中启用了粗体.
只是禁用它的工作!

相关问题