facebook - 更改 FB 登录按钮文本 (react-native-fbsdk)

Question

我正在使用 react-native-fbsdk。如何将 fb 登录按钮文本从“使用 facebook 登录”更改为“使用 fb 继续”？

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

<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.")}/>

Answer 1

最简单的方法是upgrade the SDK to 4.19.0 :

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.

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

但是，如果您在自定义文本后使其字面意思是“使用 fb 继续”，则需要重新创建 Button 组件，并使用它来触发 Login Manager ，即:

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，如果您有自己的组件库，或者使用像 NativeBase 这样的现成组件，这将特别方便。 .