FBログインボタンのテキストを変更する（react-native-fbsdk）

Question

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

Answer 1

最も簡単な方法は、upgrade the SDK to 4.19.0にある：

LoginButton UIが4.19に変更されます。 0。 「Facebookでログイン」の代わりに、「Facebookで続行」と表示されます。ボタンの色は＃3B5998から＃4267B2に変更されます。ボタンの高さは30dpから28dpに減少しました。これは、Facebookのロゴの周りに小さなフォントサイズとパディングを使用するためです。

LoginButtonを使用するためのインターフェイスは変わりません。あなたは、それは文字通りあなたがButtonコンポーネントを再作成する必要があるだろう「FBで続行」と言うように、テキストをカスタマイズした後なら、

ただし、アプリのUXを破壊しない更新LoginButtonを確保するために時間がかかる、としてくださいすなわち、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などのひとつになって準備を使用する場合に特に便利であるUIを完全に制御できます。

Answer 2

ボタンをカスタマイズしたい人には、テキストを変更する方法はありませんでしたが、このボタンの幅と高さはnode-modules/react-native-fbsdk/js/FBLoginButton.jsに変更できます。

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

ここでは、「Facebookで続ける」テキストがうまく収まるように195の値を書きました。