0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[ReactNative] 日本語フォントの中央揃え(縦方向)がどうしてもずれる

Posted at

問題

タイトルの通り、日本語フォントの中央揃えがなんか微妙にずれてる。。。
英語は問題ないのに。。。

具体的な状況としては、以下の画像の通り。
スクリーンショット 2020-03-11 8.24.51.png

右側のfalseはちゃんと真ん中にきてるのに、
左側の「アイテムA」や「その他」はなんか微妙にずれている。

確認1

デバッガーで適用されているCSSを見たところ、不自然なCSSは適用されていない。

確認2

テキスト要素に { backgroundColor: 'lightgreen'} を適用してみて、テキスト要素の大きさを確認してみる。
スクリーンショット 2020-03-11 8.33.26.png

なんか日本語の方、、、勝手に余白がbottomに作られてる、、、中央寄せはできてるけど、この余白が邪魔して微妙にずれているわけですね。。。

解決

Textのheightを文字サイズと同じ大きさに設定する。
以下参考のコードです(色々端折ってます。。。)

import { Left, Right } from 'native-base';

...
return (
  ...
  <Left style={{ alignSelf: 'center' }} >
    <Text style={{ fontSize: 16, height: 16 }}>アイテムA</Text>
  </Left>
  <Right style={{ alignSelf: 'center' }} >
    <Text style={{ fontSize: 16, height: 16 }}>false</Text>
  </Right>
  ...
);

これで余白が消え、ちゃんと中央揃えができました。
スクリーンショット 2020-03-11 8.45.15.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?