Question

为了拥有默认的身份验证屏幕，我只能这样做（https://github.com/aws-samples/aws-mobile-react-native-starter）：

import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);

我得到了相当丑陋的默认开箱即用登录屏幕：

然后文档说我无法修改默认值，我必须创建自己的（https://github.com/aws-samples/aws-mobile-react-native-starter）：

您可以使用此高阶组件，也可以构建自己的UI并使用Amplify的API。

但他们也说，我可以自定义默认登录屏幕（https://github.com/aws/aws-amplify/blob/master/README.md）：

AWS Amplify将为您提供可自定义的用户界面，以便用户注册和登录等常见用例。

问题是，我们可以自定义默认屏幕吗？如果我们想要一些想要的东西，我们必须创建自己的屏幕吗？

Answer 1

根据the docs，您应该能够将应用包装在HOC（Authenticator）中，而不是使用withAuthenticator。

import { Authenticator } from 'aws-amplify-react';

export default class AppWithAuth extends Component {
 render(){
    return (
      <Authenticator>
        <App />
      </Authenticator>
    );
  }
}

Answer 2

所有Amplify Authenticator组件都可以与aws-amplify-react-native单独导入。您可以将源代码复制到存储库（https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src）到自己的项目中，修改它并从那里导入。 *如果要获取其他框架的包-React，Vue，Angular等，请访问此处https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native。

当前，在我的项目中，我正在自定义SignUp, SignIn and ConfigrmSignUp组件，如下所示。这是创建您自己的UI的建议方法，并且可以与扩增验证器无缝地协同工作。

在此处查看更多信息： https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui

import {
  withAuthenticator,
  SignUp,
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  VerifyContact,
  Greetings,
  Loading,
  RequireNewPassword
} from 'aws-amplify-react-native';

import { 
  Authenticator, 
  ConfirmSignUpScreen, <----- customized authenticator component
  SignUpScreen, <----- customized authenticator component
  SignInScreen <----- customized authenticator component
} from './screens/auth';

export default withAuthenticator(App, false, [
  <Loading />
  <SignInScreen />  <----- customized authenticator component
  <ConfirmSignIn />  
  <VerifyContact />
  <SignUpScreen />  <----- customized authenticator component
  <ConfirmSignUpScreen />  <----- customized authenticator component
  <ForgotPassword />
  <RequireNewPassword />
  <Greetings />
]);

Answer 3

我在为aws-amplify定制signUp和SignIn Component时遇到了同样的问题，所以我创建了这个lib（aws-amplify-react-custom-ui）。这是自定义登录的示例：

    import SignIn from "./SignIn";
    import AmplifyCustomUi from "aws-amplify-react-custom-ui";
    AmplifyCustomUi.setSignIn(SignIn);

更多信息： https://github.com/ysfmag/aws-amplify-react-custom-ui

Answer 4

是的，我们可以使用aws-amplify-react-native软件包自定义屏幕。使用我们的自定义屏幕调用扩增cli API。逻辑因使用案例而异，以下是一些代码，可帮助您提前参考this doc

   import React, { Component } from 'react';
    import { View } from 'react-native';
    import {
      Authenticator,
      AmplifyTheme
    } from 'aws-amplify-react-native';
    // Custom  screens
    import Home from './screens/Home';
    import SignIn from './screens/SignIn';
    import SignUp from './screens/SignUp';
    import ConfirmSignUp from './screens/ConfirmSignUp';
    import ForgotPassword from './screens/ForgotPassword';
    //Custom theme
    const theme = {
      ...AmplifyTheme,
      container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
        paddingTop: 10,
        width: '100%',
        marginTop: 30
      },
    }
    class App extends Component {

      render() {
        return (
          <View style={{ flex: 1 }}>
            <Authenticator theme={theme} hideDefault={true} hide="Home" 
            includeGreetings={true}
            >
              <SignIn />
              <SignUp/>
              <ConfirmSignUp />
              <ForgotPassword />
              <Home />
            </Authenticator>
          </View>
        );
      }
    }

    export default App;

;）

是否可以自定义aws-amplify-react-native软件包的默认注册，登录屏幕？

4 个答案: