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

Question

我使用的是react-native-fbsdk。如何将fb登录按钮文本从“login with facebook”更改为“Continue with 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

4.19.0中更改了LoginButton UI。该按钮现在显示“继续使用Facebook"，而不是”使用Facebook登录“。按钮颜色从#3B5998更改为#4267B2。按钮高度从30dp降低到28dp，这是因为在较大的Facebook徽标周围使用了较小的字体和填充。使用LoginButton的界面保持不变。请花点时间确保更新的LoginButton不会破坏您的应用程序的用户体验

但是，如果你想要自定义文本，使其字面上显示"Continue with fb“，你需要重新创建按钮组件，并使用它来触发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 )，这将特别方便。

Answer 2

您可以使用自定义函数并将Login Manager添加到您的函数中。

以下是代码

import { LoginManager } from "react-native-fbsdk";

const loginWithFacebook = () => {
  LoginManager.logInWithPermissions(["public_profile", "email"]).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);
     }
   );
}

在您的自定义按钮中调用它

<TouchableOpacity onPress={() => loginWithFacebook()}>
  <Text> Login With Facebook </Text>          
</TouchableOpacity>

Answer 3

对于那些想要自定义按钮的人，我还没有找到更改其文本的方法，但您可以在node-modules/react-native-fbsdk/js/FBLoginButton.js中更改此按钮的宽度和高度。

const styles = StyleSheet.create({
  defaultButtonStyle: {
    height: 30,
    width: 195,
  },
});

我在这里写的值是195，这样“继续使用Facebook”文本就可以很好地显示出来。