地味に辛いこの問題。vertical-align: middle問題。 iOSが英語環境（設定 -> 一般 -> 言語と地域が英語）の場合は問題なくセンターとれるのですが、日本語環境にするとflex-startみたいにpaddingTopがゼロになってしまう問題があります。やっかいなのは、paddingで調整するとAndroidはこの問題がないため表示がずれます。。
Text(iOS) with Japanese can't be vertically center'ed on #reactnative I need to add padding on top which is not good for android. :S pic.twitter.com/IjRHwK6NjA
— Shohei Kameda (@shohey1226) May 29, 2017
コードはボタンだったら、下記みたいな感じ。ボタンに限らず、この問題はおきていると思います。
|
1 2 3 |
<FAIcon.Button onPress={this.onPressFBLogin} name="facebook" iconStyle={{paddingRight:5, paddingLeft: 10}} backgroundColor="#3b5998" borderRadius={0}> <Text style={{fontFamily: 'Arial', fontSize: 14, color: 'white'}}>Facebookでログイン・登録</Text> </FAIcon.Button> |
解決方法は、fontサイズと同じViewでラップする。（試行錯誤後、閃きました）
|
1 2 3 |
<FAIcon.Button onPress={this.onPressFBLogin} name="facebook" iconStyle={{paddingRight:5, paddingLeft: 10}} backgroundColor="#3b5998" borderRadius={0}> <View style={{height: 14, margin:5}}><Text style={{fontFamily: 'Arial', fontSize: 14, color: 'white'}}>Facebookでログイン・登録</Text></View> </FAIcon.Button> |
