地味に辛いこの問題。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> |