3
0

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 3 years have passed since last update.

Androidの時にテキストが真ん中寄せにならない

Posted at

どんな問題か

こんな感じで縦方向にテキストを中央配置しようとしたが、
IOSではうまくいくものおの、Androidは

<View style={{flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', height: 40}}>
  <Text style={{fontSize: 14, fontFamily: 'NotoSansJP-Regular'}}>テキスト</Text>
</View>

IOSではうまくいっているが、Androidではうまくいかない
微妙に上に寄ってしまう

解決策

https://react-mongolia.github.io/react-native/docs/0.40/text-style-props#includefontpadding
公式を見に行ったら解決策が書いてあった

Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center. Default is true.

どうやらAndroidだとfontによってはpaddingがあたってしまうみたい
-> includeFontPadding: falseに設定することでpaddingを取り除く

<View style={{flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', height: 40}}>
  <Text style={{fontSize: 14, fontFamily: 'NotoSansJP-Regular', includeFontPadding: false}}>テキスト</Text>
</View>
3
0
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
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?