web-dev-qa-db-fra.com

Modifier le texte du bouton de connexion FB (react-native-fbsdk)

J'utilise react-native-fbsdk. Comment puis-je changer le texte du bouton de connexion fb de "Connexion avec facebook" à "Continuer avec fb"?

Le composant ressemble à ceci, et je ne trouve pas de moyen de le changer:

<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.")}/>
facebookreactjsreact-nativefbsdkreact-native-fbsdk
13
perrosnk

Le moyen le plus simple consiste à mettre à niveau le SDK vers 4.19. :

L'interface de LoginButton a été modifiée dans 4.19.0. Au lieu de "Se connecter avec Facebook", le bouton affiche désormais "Continuer avec Facebook". La couleur du bouton est changée en # 4267B2 à partir de # 3B5998. La hauteur du bouton passe de 30dp à 28dp en raison de l'utilisation d'une taille de police plus petite et de rembourrages autour d'un logo Facebook plus grand.

L'interface pour utiliser LoginButton reste la même. Veuillez prendre le temps de vous assurer que le LoginButton mis à jour ne casse pas l'UX de votre application.

Cependant, si vous souhaitez personnaliser le texte et qu'il indique littéralement "Continuer avec fb", vous devez recréer le composant Button et l'utiliser pour déclencher le Gestionnaire de connexion , c'est-à-dire:

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

De cette façon, vous avez également un contrôle total sur l'interface utilisateur, ce qui est particulièrement pratique si vous avez votre propre bibliothèque de composants, ou utilisez une bibliothèque prête à l'emploi comme NativeBase .

30
designorant