どんな問題か
こんな感じで縦方向にテキストを中央配置しようとしたが、
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>