Estoy usando react-native-fbsdk. ¿Cómo puedo cambiar el texto del botón de inicio de sesión de fb de 'Iniciar sesión con facebook' a 'Continuar con fb'?
El componente se ve así, y no puedo encontrar una manera de cambiarlo:
<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.")}/>La forma más fácil es actualizar el SDK a 4.19.0 :
La interfaz de usuario de LoginButton se cambió en 4.19.0. En lugar de "Iniciar sesión con Facebook", el botón ahora muestra "Continuar con Facebook". El color del botón se cambia a #4267B2 desde #3B5998. La altura del botón se redujo de 30 dp a 28 dp debido al uso de un tamaño de fuente más pequeño y rellenos alrededor de un logotipo de Facebook más grande.
La interfaz para usar LoginButton sigue siendo la misma. Tómese el tiempo para asegurarse de que el botón de inicio de sesión actualizado no rompa la experiencia de usuario de su aplicación.
Sin embargo, si desea personalizar el texto para que literalmente diga "Continuar con fb", deberá volver a crear el componente Botón y usarlo para activar el Administrador de inicio de sesión , es decir:
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 esa manera, también le brinda un control total sobre la interfaz de usuario, lo que es particularmente útil si tiene su propia biblioteca de componentes o si usa una lista para usar como NativeBase .
Puede usar su función personalizada y agregar Administrador de inicio de sesión a su función.
Aquí está el código
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); } ); }Llámalo en tu botón personalizado
<TouchableOpacity onPress={() => loginWithFacebook()}> <Text> Login With Facebook </Text> </TouchableOpacity>Para los que quieran personalizar el botón, no he encontrado la manera de cambiar su texto, pero pueden cambiar el ancho y alto de este botón en node-modules/react-native-fbsdk/js/FBLoginButton.js .
const styles = StyleSheet.create({ defaultButtonStyle: { height: 30, width: 195, }, });He escrito aquí un valor de 195 para que quede bien el texto 'Continuar con Facebook'.