Question

我在使用应用程序设置Facebook登录按钮样式时遇到问题。

我的观点示例：

<View style={{ ...styles.btnWrapper }}>
  <LoginButton
    onLoginFinished={(error) => {
      if (error) {
        console.log(error);
        // TODO error message
      } else {
        debugger;
        AccessToken.getCurrentAccessToken().then((data) => {
          const processRequest = new GraphRequest(
            `me/picture?redirect=0&height=500&width=500&type=normal`,
            null,
            this.getProfilePic,
          );
          new GraphRequestManager()
            .addRequest(processRequest)
            .start();
          this.onSuccessfulLogin(
            data?.userID!,
            data?.accessToken!,
          );
        });
      }
    }}
    style={{ ...styles.faceBtn }}
    // onLogoutFinished={() => alert('User logged out')}
  />
</View>

以下是屏幕：

我尝试过：

btnWrapper: {
    width: 311,
    height: 46,
},
faceBtn: {
    width: '100%',
    height: '100%',
    padding: 0,
},

但是只需要高度和宽度。我需要在按钮中间放置上面的文本。有什么建议吗？

Answer 1

您没有完全控制fbsdk提供的def vowel_swapper(string): return string.replace('o', 'ooo').replace('O', '000').lower().replace('a', '4').replace('e', '3').replace('u', '|_|')样式的样式，如果要自定义按钮，您始终可以自己制作并与LoginButton一起使用。这是下面的示例代码

导入所需功能

LoginManager

使用您的样式创建自定义按钮

const { LoginButton,LoginManager,AccessToken} = require("react-native-fbsdk");

使用Facebook登录

<TouchableOpacity onPress={this._loginFacebook}>
<Text> Login with facebook </Text>
</TouchableOpacity>

Answer 2

我不完全了解LoginButton组件的内部外观，但是React Native使用Flexbox进行布局。

您可以在“继续使用Facebook”文本上使用alignSelf。请参阅文档here。

如果这不是您的组件，并且您要从另一个库中导入它，对我来说这似乎是个错误。您应该在图书馆问题页面上打开问题。

如何设置Facebook按钮的样式

2 个答案: