在 React Native 上自定義 AWS amplify withAuthenticator UI

Question

如何使用 Authenticator UI 自定義默認 AWS？ 我想隱藏或刪除提交的Phone Number並添加自定義 colors 和填充。 還想使用 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.身份驗證\\注冊需要哪些字段？

為此，您需要更改用戶池的設置。 登錄到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} />

“ 自定義放大UI主題 ” 文檔中的所有這些以及更多內容。

另一個選項是構建您的身份驗證屏幕，然后從您的自定義屏幕中調用Auth.SignIn \\ Up \\ Out，該文檔鏈接中也對此進行了討論。

Answer 2

加

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

在......的最后

src / global.scss

Answer 3

如果要更改 UI，則必須覆蓋AmplifyTheme.ts中定義的屬性。

因此，您需要像這樣覆蓋 UI 屬性：

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

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

上面的代碼應該可以工作，您可以更改默認 UI。