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

【问题标题】：Style problem in authentication page react-native身份验证页面 react-native 中的样式问题
【发布时间】：2020-05-22 05:04:12
【问题描述】：

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

我为我的应用程序的用户创建了一个页面身份验证。您可以连接登录/注册以及 Facebook 和 Google。我不知道我能做到这一点，但我的 Google 按钮顶部和底部都有很大的空间。我不明白它是从哪里来的... 你能帮我么？感谢任何线索/帮助:)

图像认证页面

async function logIn() {
  try {
    await Facebook.initializeAsync("id");
    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:
              "10517196-fpp2cg7r886ln73ri03qqdrvdriek33s.apps.googleusercontent.com",
            iosClientId:
              "10596-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"
  },

【问题讨论】：

标签： css react-native google-authentication

【解决方案1】：

你摇滚@Sydney Y

感谢您的帮助，我以这种方式更改了代码。

async function logIn() {
  try {
    await Facebook.initializeAsync("id");
    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>
      <Button
        onPress={() => props.signIn()}
        containerStyle={[styles.mybtnContainer, styles.btnContainerGoogle]}
        contentStyle={styles.buttonAccueil}
      >
        GOOGLE
      </Button>
    </View>
  );
};

const LoggedInPage = props => {
  return (
    <View>
      <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:
          "1056-fpp2cg7r886ln73ri03qqdrvdriek33s.apps.googleusercontent.com",
        iosClientId:
          "106-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}>
              {this.state.signedIn ? (
              <LoggedInPage
                name={this.state.name}
                photoUrl={this.state.photoUrl}
              />
            ) : (
              <LoginPage signIn={this.signIn} />
            )}
          <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>
    );
  }
}

【讨论】：

太棒了！我很高兴这有帮助 :) 我已经看到这个新代码会更好。
我是一名新开发人员，所以...我犯了很多错误。但我学会了......非常感谢！

【解决方案2】：

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

举例说明：

<View>
  <View>
    <View>
      <Button> Google </Button> // inside 3 Views
    </View>
  </View>
  // move Google Button here, use 'this' instead of passing props to LoginPage component
  <Button>Facebook</Button> // inside 1 View
  <Button>Login</Button> // inside 1 View
  <Button>Sign Up</Button> // inside 1 View
</View>

【讨论】：