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'}]}> 您需要将覆盖样式放在数组中，第二项覆盖第一项:)

标签： javascript css text react-native

【解决方案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 可能目前开发人员经常使用 StackOverflow :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 有效。希望您能理解，如果您需要我，请告诉我。