react-native - 在 React Native 上使用身份验证器 UI 自定义 AWS 放大

Question

如何使用 Authenticator UI 自定义默认 AWS？我想隐藏或删除字段Phone Number并添加自定义颜色和填充。还想用 React Native 的keyboardAvoidingView.

使用 AWS amplify 设置身份验证非常快，但似乎很难自定义我想要的注册和登录体验方式。

import React from 'react';
import Root from './src/components/Root/Root';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

class App extends React.Component {
  render() {
    return <Root />;
  }
}

export default withAuthenticator(App);

如您所见，设置它的速度非常快，但默认 UI 不可用，除非您可以为其添加自定义样式。

Answer 1

您在这里有两个问题： 1. Authenticate \ Sign Up 需要哪些字段？

为此，您需要更改用户池的设置。登录 AWS 控制台，转到 Cognito 并管理用户池。创建一个新池并指定您希望用户如何登录和启用\禁用 MFA。

我的猜测是大多数人只想要电子邮件并禁用 MFA。

之后，在 Mobile Hub 登录设置中删除用户池，并将这个新用户池导入到 Mobile Hub 应用程序的登录设置中。

2. 如何自定义 AWS Amplify 托管的身份验证 UI？

要自定义样式并保留屏幕，您可以将自己的主题应用于<Authenticator>

import MyTheme from './MyTheme';
<Authenticator theme={MyTheme} />

您可以导入默认和覆盖部分

import { AmplifyTheme } from 'aws-amplify-react';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });

<Authenticator theme={MyTheme} />

所有这些以及更多内容都在Docs for Customizing Amplify UI Theme中。

另一种选择是构建您的身份验证屏幕并从您的自定义屏幕调用 Auth.SignIn\Up\Out，这也在该文档链接中进行了讨论。

Answer 2

如果要更改 UI，则必须覆盖AmplifyTheme.ts.

因此，您需要像这样覆盖 UI 属性：

const MyTheme = Object.assign({}, AmplifyTheme, {
  button: {
    ...AmplifyTheme.button,
    backgroundColor: "#2fbafa",
  },
});

export default withAuthenticator(App, false, [], null, MyTheme);

上面的代码应该可以工作，您可以更改默认 UI。

Answer 3

添加

@import '../src/theme/variables.scss';

在......的最后

src/global.scss