23

我正在使用 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.")}/>
4

3 回答 3

41

最简单的方法是将 SDK 升级到 4.19.0：

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

使用 LoginButton 的界面保持不变。请花时间确保更新后的 LoginButton 不会破坏您应用的用户体验

但是，如果您在自定义文本之后，它的字面意思是“继续使用 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这样的现成的库，这将特别方便。

于 2017-02-10T00:54:58.233 回答
5

您可以使用自定义函数并将登录管理器添加到您的函数中。

这是代码

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>
于 2020-03-04T06:44:28.903 回答
-5

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

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

我在这里写了一个 195 的值，以便“继续使用 Facebook”文本非常适合。

于 2017-05-21T05:15:37.280 回答