web-dev-qa-db-ja.com

React-native：textAlign： 'right'スタイルが正しくない

反応ネイティブcss-スタイリングは非常に新しく、次のコードがあります。

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

問題は、2番目の "textAlign： 'right'"が機能しないことです。テキストはまだ左側にあります。テキストを同じ行に配置しますが、（明らかに）2番目のテキストオブジェクトは右側に配置します。

ヒントはありますか？ありがとう！

edit出力は次のようになります。 Screenshot

javascriptcsstextreact-native
16
dv3

今は確認できませんが、これを試してもらえますか？

{textAlign: 'right', alignSelf: 'stretch'}

動作するかどうか教えてください。

[〜＃〜] update [〜＃〜]

回避策を提案できますか？

<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>
48
Mihir

私は、全幅ボタンを使用しているため（すでに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>
1
lachlanvandervelden

テキストタグの幅を100％に設定して、テキストタグが全幅に広がるようにし、texalignを正しく指定します。これはうまくいくかもしれません。

1
Ramiah Viknesh