身份验证页面中的样式问题react-native

Question

我需要帮助才能理解我可能在代码中犯的错误。

我为我的应用程序的用户进行了页面身份验证。您可以连接登录/注册以及Facebook和Google。我不知道我能做到这一点，但是Google Button的顶部和底部都有很大的空间。我不知道它来自哪里...你能帮我么 ？感谢您的指导/帮助：）

Image Authentication page

async function logIn() {
  try {
    await Facebook.initializeAsync("349317145833904");
    const {
      type,
      token,
      expires,
      permissions,
      declinedPermissions
    } = await Facebook.logInWithReadPermissionsAsync({
      permissions: ["public_profile"]
    });
    if (type === "success") {
      // Get the user's name using Facebook's Graph API
      const response = await fetch(
        `https://graph.facebook.com/me?access_token=${token}`
      );
      Alert.alert("Logged in!", `Hi ${(await response.json()).name}!`);
    } else {
      // type === 'cancel'
    }
  } catch ({ message }) {
    alert(`Facebook Login Error: ${message}`);
  }
}

const LoginPage = props => {
  return (
    <View style={styles.container}>
      <Button
        onPress={() => props.signIn()}
        containerStyle={[styles.mybtnContainer, styles.btnContainerGoogle]}
        contentStyle={styles.buttonAccueil}
      >
        GOOGLE
      </Button>
    </View>
  );
};

const LoggedInPage = props => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome:{props.name}</Text>
      <Image source={{ uri: props.photoUrl }} />
    </View>
  );
};

    export default class Authentication extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          signedIn: false,
          name: "",
          photoUrl: ""
        };
      }
      signIn = async () => {
        try {
          const result = await Google.logInAsync({
            androidClientId:
              "1051966217196-fpp2cg7r886ln73ri03qqdrvdriek33s.apps.googleusercontent.com",
            iosClientId:
              "1051966217196-2n9sl21e06cd36o901f92u3vi07qhd9u.apps.googleusercontent.com",
            scopes: ["profile", "email"]
          });

          if (result.type === "success") {
            this.setState({
              signedIn: true,
              name: result.user.name,
              photoUrl: result.user.photoUrl
            });
          } else {
            console.log("cancelled");
          }
        } catch (e) {
          console.log("error", e);
        }
      };

      render() {
        return (
          <ImageBackground
            source={require("../../assets/images/background.jpg")}
            style={styles.backgroundImage}
          >
            <Header
              centerComponent={{
                text: i18n.t("welcome.title"),
                style: {
                  height: 60,
                  fontFamily: "FunctionLH",
                  fontSize: 30,
                  color: "#fff"
                }
              }}
              containerStyle={{
                marginTop: 0,
                backgroundColor: "#6C6363",
                borderBottomColor: "transparent" }}
              statusBarProps={{ barStyle: "light-content" }}
            />
            <View style={styles.container}>
              <View style={styles.container}>
                {this.state.signedIn ? (
                  <LoggedInPage
                    name={this.state.name}
                    photoUrl={this.state.photoUrl}
                  />
                ) : (
                  <LoginPage signIn={this.signIn} />
                )}
              </View>
              <Button
                onPress={logIn}
                containerStyle={[styles.mybtnContainer, styles.btnContainerFb]}
                contentStyle={styles.buttonAccueil}
              >
                FACEBOOK
              </Button>
              <Button
                onPress={() => this.props.navigation.navigate("Login")}
                containerStyle={styles.mybtnContainer}
                contentStyle={styles.buttonAccueil}
              >
                {i18n.t("welcome.action.login").toUpperCase()}
              </Button>
                <Button
                  onPress={() => this.props.navigation.navigate("Signup")}
                  containerStyle={styles.mybtnContainer}
                  contentStyle={styles.buttonAccueil}
                >
                  {i18n.t("welcome.action.signup").toUpperCase()}
                </Button>
            </View>
          </ImageBackground>
        );
      }
    }

样式：

container: {
    flex: 1,
    backgroundColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
  },
header: {
    fontFamily: "FunctionLH",
    fontSize: 25
  },
  buttonAccueil: {
    fontFamily: "FunctionLH",
    fontSize: 26,
    fontWeight: "900",
    alignItems: "center",
    justifyContent: "center"
  },
mybtnContainer: {
    fontFamily: "FunctionLH",
    marginVertical: 6,
    minWidth: 275,
    height: 50,
    backgroundColor: "rgba(108, 99, 99, .9)",
    borderColor: "#6C6363",
    borderRadius: 100
  },
btnContainerFb: {
    fontFamily: "FunctionLH",
    backgroundColor: "#436AF9",
    borderColor: "#436AF9"
  },
  btnContainerGoogle: {
    fontFamily: "FunctionLH",
    backgroundColor: "#F53838",
    borderColor: "#F53838"
  },

Answer 1

您的Google按钮与其他按钮位于单独的组件中，并嵌套在几个View组件中。如果您解决它，它应该看起来更好。至少：不要将容器样式分配给每个视图。

以说明：

<View>
  <View>
    <View>
      <Button> Google </Button> // inside 3 Views
    </View>
  </View>
  <Button>Facebook</Button> // inside 1 View
  <Button>Login</Button> // inside 1 View
  <Button>Sign Up</Button> // inside 1 View
</View>