如何在 React Native (Android) 的 Facebook 登录按钮中将文本居中?
How to center text in Facebook Login Button for React Native (Android)?
我在我的 React-Native 应用程序中使用 Facebook SDK 的(通过 react-native-fbsdk
)登录按钮。
按钮文本 Continue with Facebook
在 iOS 中显示为垂直居中,但在 Android (7.0) 中显示为偏离中心。
我唯一的选择是制作自己的手动调用 LoginManager 的自定义按钮,还是有办法使用样式对齐文本(我尝试了 alignItems 和 justifyContent)?看来我必须根据 this SO question.
做前者
这是我目前的代码:
<LoginButton
scope={'public_profile email'}
style={{
width: 220,
height: 40
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
您可以将按钮包装到容器中
<View style={{
width: 220, // whatever you want
height: 50, // whatever you want
justifyContent: 'center', // center the button
backgroundColor: '#4267B2', // the same as the actual button
paddingHorizontal: 10 // optionally add some horizontal padding for better looking
}}>
<LoginButton
scope={'public_profile email'}
style={{
flex: 1, // fill the container
maxHeight: 30 // the default height
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
</View>
结果
我在我的 React-Native 应用程序中使用 Facebook SDK 的(通过 react-native-fbsdk
)登录按钮。
按钮文本 Continue with Facebook
在 iOS 中显示为垂直居中,但在 Android (7.0) 中显示为偏离中心。
我唯一的选择是制作自己的手动调用 LoginManager 的自定义按钮,还是有办法使用样式对齐文本(我尝试了 alignItems 和 justifyContent)?看来我必须根据 this SO question.
做前者这是我目前的代码:
<LoginButton
scope={'public_profile email'}
style={{
width: 220,
height: 40
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
您可以将按钮包装到容器中
<View style={{
width: 220, // whatever you want
height: 50, // whatever you want
justifyContent: 'center', // center the button
backgroundColor: '#4267B2', // the same as the actual button
paddingHorizontal: 10 // optionally add some horizontal padding for better looking
}}>
<LoginButton
scope={'public_profile email'}
style={{
flex: 1, // fill the container
maxHeight: 30 // the default height
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
</View>
结果