Question

我正在制作一个通过放大添加身份验证使用Amazon Cognito身份验证的应用程序。这是我第一次使用它，因此我决定不对UI进行过多自定义，但我试图按照文档here的指示覆盖here列出的AmplifyTheme样式。

这是我尝试覆盖AmplifyTheme的尝试：

const MyButton = Object.assign({}, AmplifyTheme.button, { 
backgroundColor: '#A7B1B2' });

const myNavBar = Object.assign({}, AmplifyTheme.navBar, { marginTop: 
35, padding: 15, flexDirection: 'row', justifyContent: 'space-between', 
alignItems: 'center'});

const myTheme = Object.assign({}, AmplifyTheme, { button: MyButton, 
navBar: myNavBar });

根据Amplify Authentication文档，在App.js文件的底部，我有以下内容：

export default withAuthenticator(App,
  includeGreetings = true,
  authenticatorComponents = [],
  federated = null,
  theme = {myTheme});

但是，Greeting样式不变！有人知道如何重写AmplifyTheme吗？

Answer 1

显然，您可以添加一个带有自定义主题的单独文件。 export中的主题文件withAuthenticator/Authenticator

//Custom theme
const theme = {
  ...AmplifyTheme,
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 10,
    width: '100%',
    marginTop: 30
  },
  button: {
    alignItems: 'center',
    padding: 16,
  }
}

只推荐这篇文章custom module

我如何在我的本机应用程序中覆盖AmplifyTheme

1 个答案: