更改FB登录按钮文本(react-native-fbsdk) [英] Change the FB login button text (react-native-fbsdk)

问题描述

我正在使用react-native-fbsdk. 如何将fb登录按钮的文本从使用Facebook登录"更改为继续使用fb"?

I am using react-native-fbsdk. How can I change the fb login button text from 'Login with facebook' to 'Continue with fb'?

该组件看起来像这样，我找不到更改它的方法:

The component looks like this, and I can't find a way to change it:

<LoginButton
          style={styles.facebookbutton}
          readPermissions={["public_profile", 'email']}
          onLoginFinished={
            (error, result) => {
              if (error) {
                console.log("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.log("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.log(data);
                    console.log(data.accessToken.toString());
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>

推荐答案

最简单的方法是

在4.19.0中更改了LoginButton UI.现在，该按钮代替使用Facebook登录"，而是显示继续使用Facebook".按钮颜色从#3B5998更改为#4267B2.由于使用较小的字体大小和较大的Facebook徽标周围的填充，按钮的高度从30dp降低到28dp.

The LoginButton UI is changed in 4.19.0. Instead of "Log in with Facebook", the button now displays "Continue with Facebook". The button color is changed to #4267B2 from #3B5998. The button height is decreased from 30dp to 28dp due to use of smaller font size and paddings around a larger Facebook logo.

使用LoginButton的界面保持不变.请花点时间确保更新的LoginButton不会破坏您应用的UX

The interface for using LoginButton remains the same. Please take time to ensure the updated LoginButton does not break your app's UX

但是，如果您是在自定义文本之后使用的，那么它的字面意思是"Continue with fb"(继续使用fb).您需要重新创建Button组件，并使用它来触发登录管理器，即:

However, if you're after customising the text so it literally says "Continue with fb" you'd need to recreate the Button component, and use it to trigger the Login Manager, i.e.:

import React, { Component } from 'react'
import { Button } from 'react-native'

import { LoginManager } from 'react-native-fbsdk'

export default class Login extends Component {
  handleFacebookLogin () {
    LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
      function (result) {
        if (result.isCancelled) {
          console.log('Login cancelled')
        } else {
          console.log('Login success with permissions: ' + result.grantedPermissions.toString())
        }
      },
      function (error) {
        console.log('Login fail with error: ' + error)
      }
    )
  }
  render () {
    return (
      <Button
        onPress={this.handleFacebookLogin}
        title="Continue with fb"
        color="#4267B2"
      />
    )
  }
}

这种方式还使您可以完全控制UI，如果您拥有自己的组件库，或者使用现成的组件库，例如

That way also gives you full control over the UI which is particularly handy if you have your own components library, or use a ready made one like NativeBase.

这篇关于更改FB登录按钮文本(react-native-fbsdk)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！