Как стилизовать кнопку facebook

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

У вас нет полного контроля над стилем LoginButton, который предоставляется fbsdk, если вам нужна настраиваемая кнопка, вы всегда можете создать свою собственную и использовать ее с LoginManager. Вот пример кода ниже:

импорт необходимых функций

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

создание пользовательской кнопки с вашим стилем

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

вход через facebook

 _loginFacebook = () => {
    LoginManager.logInWithPermissions(["public_profile", "email"]).then(
    result => {
      if (result.isCancelled) {
        console.log("Login cancelled");
      } else {
        AccessToken.getCurrentAccessToken()
          .then(data => {
          
           
            //do anything with data.accessToken
            
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    function(error) {
      console.log("Login fail with error: " + error);
    }
  );
   }

Answer 2

Я точно не знаю, как компонент LoginButton выглядит внутри, но React Native использует Flexbox для макета.

Вы можете использовать alignSelf в тексте «Продолжить с Facebook». Обратитесь к документации здесь .

Если это не ваш компонент, и вы импортируете его из другой библиотеки, мне это кажется ошибкой. Вы должны открыть вопрос на странице выпуска библиотек.