Question

我正在使用react-native-fbsdk。如何将“使用facebook登录”中的fb登录按钮文本更改为“使用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。由于使用较小的字体大小和较大的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"
      />
    )
  }
}

通过这种方式，您还可以完全控制用户界面，如果您拥有自己的组件库，或者使用现成的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

使用这个，

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

handleFacebookLogin () {
    LoginManager.logInWithPermissions(['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)
      }
    )
  }

在按钮组件上调用该函数。

<TouchableOpacity style={styles.btn} onPress={this.handleFacebookLogin}>
          <Text style={styles.TextStyle}>Login With Facebook </Text>          
 </TouchableOpacity>

Answer 4

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

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

我在这里写的是195的值，因此'继续使用Facebook'文字很合适。

更改FB登录按钮文本（react-native-fbsdk）

4 个答案: