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

Posted 2023-03-15

【中文标题】在 React Native 上使用身份验证器 UI 自定义 AWS 放大

【英文标题】：Customize AWS amplify withAuthenticator UI on React Native

【发布时间】：2018-06-13 08:18:35

【问题描述】：

如何使用 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 不可用，除非您可以为其添加自定义样式。

【问题讨论】：

寻找相同问题的答案。我现在正在调查。

@Ohsik 在这方面有什么进展吗？

找不到任何绕过的方法。最终制作了自定义 UI。

【参考方案1】：

您有两个顾虑： 1. Authenticate \ Sign Up 需要哪些字段？

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

我的猜测是大多数人都希望仅使用电子邮件并禁用 MFA。

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

如何自定义 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，这也在该文档链接中进行了讨论。

【讨论】：

当我放置背景时，上面的代码似乎没有改变样式：''red'' 它保持橙色！！！。

我的情况也一样，有什么建议吗？

可在 AWS 控制台上配置的 Auth 的自定义只是托管的 WEB UI。任何应用程序 UI 都需要直接在应用程序本身中进行自定义。我认为这会随着时间的推移而改变，但我上次是这样看的。

【参考方案2】：

如果您想更改 UI，则必须覆盖在 AmplifyTheme.ts 中定义的属性。

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

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

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

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

【参考方案3】：

添加

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

在结尾

src/global.scss