React-native：textAlign：'right'样式不正确

Posted 2023-02-22

【中文标题】React-native：textAlign：\'right\'样式不正确

【英文标题】：React-native: textAlign: 'right' not styling correctlyReact-native：textAlign：'right'样式不正确

【发布时间】：2016-12-19 09:51:58

【问题描述】：

我对 react-native css-styling 很陌生.. 并且有以下代码：

 <Text>
<Text style=(styles.author,  textAlign: "left" )>
    question.view_count + " views\t" + question.comment_count
    question.comment_count > 1 || question.comment_count == 0
        ? " comments"
        : " comment"
</Text>
<Text style= textAlign: "right" >
    question.solution_count > 0
        ? question.solution_count + " solutions"
        : " Solve this"
</Text>
</Text>;

问题是第二个“textAlign: 'right'” 不起作用 - 文本仍在左侧。我希望文本在同一行，但（显然）右边的第二个文本对象。

有什么提示吗？谢谢！

编辑 输出如下所示：

【问题讨论】：

输出的 html/CSS 是什么样的？

@Paulie_D 查看我的编辑

不...不是结果的图像...实际的 HTML/CSS 如果底线只是一个元素...您需要将其分成两个。

@Paulie_D 在 react-native 中可能吗？也许我对问题的标记已关闭..

仅供参考 - <Text style=styles.author, textAlign: 'left'> 实际上应该是 <Text style=[styles.author, textAlign: 'left']> 您需要将覆盖样式放在数组中，第二项覆盖第一项:)

【参考方案1】：

解决方法 -

<View style=flex: 1, flexDirection: 'row'>
  <View style=flex: 1>
    <Text>4 Views 0 Comments</Text>
  </View>
  <View style=flex: 1>
    <Text style=textAlign: 'right'>Solve This</Text>
  </View>
</View>

【参考方案2】：

我发现因为我使用的是全宽按钮（已经是 alignSelf: 'stretch'），它导致文本内容垂直而不是水平拉伸...我发现在文本元素上使用 flex: 1 似乎可以按预期工作. 示例：

finishButtonText: 
    textAlign: "center",
    flex: 1
 as StyleProp<TextStyle>

使用 .tsx / .jsx：

<Button style=alignSelf: 'stretch'>
    <Text style=styles.finishButtonText>
        Test
    </Text>
</Button>

【参考方案3】：

为您的文本标签设置 100% 的宽度，以确保它拉伸到整个宽度，然后将 texalign 设置为正确。这可能有效。

【参考方案4】：

style=marginLeft:'auto'  

将适用于按钮、项目等。

【参考方案5】：

您可以使用以下代码 sn-p 将您的文本对齐到视图的右侧：

<View style=justifyContent: 'space-between'>
   <Text style=alignSelf: 'flex-end'> Hello </Text>
</View>

【讨论】：

虽然我很欣赏新答案，但我不太明白为什么这个问题在 3 年后突然在 1.5 天内有 2 个新答案......有什么见解吗？

@dv3 可能目前开发人员经常使用 *** :D

【参考方案6】：

有时候我会用这个

<View style=flexDirection:'row-reverse'>
  <Text>This text is aligned right</Text>
</View>

【参考方案7】：

我在 android 上遇到了一个问题，即由两个 <Text> 组件包裹的字符串不尊重 textAlign 属性

<Text>
  <Text style=textAlign: "center"> // on Android this wasn't working
    Solution
  </Text>
</Text>

我用片段语法替换了外部 Text 组件，它又开始工作了：

<>
  <Text style=textAlign: "center">
    Solution that worked for me
  </Text>
</>

【参考方案8】：

您只需要在外部添加 justifyContent: 'space-between' 和 textAlign: 'right' 即可。

<View style=flexDirection: 'row', justifyContent: 'space-between'>
   <Card.Title style=fontSize: 16, textAlign: 'left'>Participating tasks</Card.Title>
   <Card.Title style=fontSize: 12, textAlign: 'right'>View More</Card.Title>        
</View>

【讨论】：

所以你的意思是像已经接受的答案？有什么区别？

【参考方案9】：

请尝试将以下样式添加到您的文本组件中。

<Text style= alignSelf: 'flex-start', textAlign: 'right' >Anoop</Text>

【讨论】：

与其他答案相比，这增加了什么？

@dv3 这在 RTL 方向的情况下帮助了我。对我来说，文本是全宽的，所以给 textAlign: 'right' 不是这样，上述解决方案有效，因为在添加 flex-start 后，文本组件宽度减小到文本大小并且 textAligned 有效。希望您能理解，如果您需要我，请告诉我。