web-dev-qa-db-ja.com

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

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

最も簡単な方法は SDKを4.19.0にアップグレード ：

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

LoginButtonを使用するためのインターフェースは同じままです。更新されたLoginButtonがアプリのUXを壊さないように時間をかけてください

ただし、テキストをカスタマイズして文字通り「Continue with 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"
      />
    )
  }
}

この方法では、UIを完全に制御できます。これは、独自のコンポーネントライブラリがある場合、または NativeBase のような既製のものを使用する場合に特に便利です。

30
designorant