Измените текст кнопки входа FB (response-native-fbsdk)

Question

Я использую response-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.")}/> 

Answer 1

Самый простой способ заключается в upgrade the SDK to 4.19.0:

LoginButton UI изменяется в 4.19. 0. Вместо «Войти в Facebook» на кнопке теперь отображается «Продолжить с Facebook». Цвет кнопки изменяется на # 4267B2 из # 3B5998. Высота кнопки уменьшается с 30dp до 28dp из-за использования меньшего размера шрифта и paddings вокруг более крупного логотипа Facebook.

Интерфейс для использования LoginButton остается прежним. Пожалуйста, найдите время, чтобы обеспечить обновленный LoginButton не нарушает UX вашего приложения

Однако, если вы после настройки текста, так что буквально означает «Продолжить с фб» Вы должны были бы воссоздать компонент 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

Для тех, кто хочет настроить кнопку, я не нашел способ изменить ее текст, но вы можете изменить ширину и высоту этой кнопки в node-modules/react-native-fbsdk/js/FBLoginButton.js.

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

я написал здесь значение 195, так что «Продолжить с Facebook» текст хорошо подходит.