Authentication 是否可以自定义aws amplify react本机软件包的默认注册、登录屏幕？

为了拥有默认的auth屏幕，我只需执行以下操作（）：

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

然后文档说我不能修改默认值，我必须创建自己的（）：

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

但他们也会说，我可以自定义默认登录屏幕（）：

AWS Amplify将为用户注册和登录等常见用例提供可定制的UI

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

根据，你应该能够将你的应用包装在一个HOC（

Authenticator

）中，而不是使用

with Authenticator

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

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

从“aws amplify react”导入{Authenticator}；
导出默认类AppWithAuth扩展组件{
render（）{
返回(
);
}
}

我在为aws amplify定制注册和登录组件时遇到了同样的问题，所以我创建了这个库（）。这是定制登录的示例：

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

有关更多信息：

---

所有Amplify Authenticator组件都可以从aws Amplify react native单独导入。您可以将源代码repo（）复制到您自己的项目中，修改它并从中导入。 *如果您想获得其他框架的软件包-React、Vue、Angular等，请访问此处

目前，在我的项目中，我正在定制

注册、登录和配置注册组件，如下所示。这是创建您自己的UI的建议方法，它与amplify验证器无缝配合

请在此处查看更多信息：

导入{
使用验证器，
报名，
确认签名，
确认注册，
放弃密码，
核实联系方式，
问候语，
加载，
重新输入密码
}来自“aws放大反应本机”；
导入{
验证者，
ConfirmSignUpScreen，是的，我们可以使用aws amplify react本机软件包自定义屏幕。amplify CLI API是通过我们的自定义屏幕调用的。逻辑可能因用例而异，下面是一些代码，可以帮助您提前了解

import React，{Component}来自'React'；
从“react native”导入{View}；
进口{
验证者，
扩大主题
}来自“aws放大反应本机”；
//定制屏幕
从“/screens/Home”导入主页；
从“/屏幕/登录”导入登录；
从“./screens/SignUp”导入注册；
从“/screens/ConfirmSignUp”导入ConfirmSignUp；
从“/屏幕/ForgotPassword”导入ForgotPassword；
//自定义主题
常量主题={
…扩大主题，
容器：{
弹性：1，
flexDirection:'列'，
对齐项目：“居中”，
为内容辩护：“周围的空间”，
paddingTop:10，
宽度：“100%”，
玛金托普：30
},
}
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

；）
我也遇到了同样的问题。我希望用户为signUp（）提供唯一的电子邮件地址，并且能够更改用户界面并删除signIn（）的MFA.到目前为止有什么进展吗？你的答案非常有用，谢谢！不过，我对一些细节有点困惑：为什么你
导入
注册
，
确认注册
，以及其他没有使用的项目？这仅仅是因为你在回答中提供了自己项目的实时代码，还是那些导入实际上需要什么？同样地，第二个
自定义验证器组件将不是来自
aws amplify react native
的
ConfirmSignIn
，而是
ConfirmSignUpScreen
导入了自己的项目，对吗？这里不想吹毛求疵，我只想完全理解这个概念…@ssc th谢谢你的好话。：D你是对的，那只是我的项目，我不认为你需要根据本期的评论添加所有组件。另外，感谢你在那里发现错误！@lee如果我使用withAuthenticator和我的自定义屏幕，它能正常工作吗？登录、注册和确认？I需要单独定制屏幕
    import SignIn from "./SignIn";
    import AmplifyCustomUi from "aws-amplify-react-custom-ui";
    AmplifyCustomUi.setSignIn(SignIn);

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 />
]);

   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;