문제

타이틀대로, 일본어 폰트의 중앙 정렬이 왠지 미묘하게 어긋나 있다. . .
영어는 문제 없지만. . .

구체적인 상황으로서는, 이하의 화상과 같다.


오른쪽의 false는 제대로 한가운데에 오고 있는데,
좌측의 「아이템 A」나 「그 외」는 왠지 미묘하게 어긋나 있다.

확인 1

디버거에서 적용되는 CSS를 보았을 때 부자연스러운 CSS는 적용되지 않았다.

확인 2

텍스트 요소에 {backgroundColor: 'lightgreen'} 을 적용하여 텍스트 요소의 크기를 확인해 봅니다.


어쩐지 일본어의 분,,, 마음대로 여백이 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>
  ...
);

이것으로 여백이 사라지고 제대로 중앙 정렬이 생겼습니다.