如何在React Native的AWS Amplify withAuthenticator中隐藏注册按钮？

开发者阿泽

2026-7-13

解决React Native中AWS Amplify withAuthenticator隐藏“创建账户”按钮的问题

方案1：适配Amplify UI v2+（推荐）

如果你的项目使用新版@aws-amplify/ui-react-native，调整配置方式即可：

方式A：用Authenticator组件直接包裹

替换高阶组件写法，通过组件属性直接控制：

import { Authenticator } from '@aws-amplify/ui-react-native';
import { View, Text, Button } from 'react-native';

export default function App() {
  return (
    <Authenticator hideSignUp={true}>
      {({ signOut, user }) => (
        <View>
          <Text>欢迎，{user.username}</Text>
          <Button onPress={signOut} title="退出登录" />
        </View>
      )}
    </Authenticator>
  );
}

方式B：继续使用withAuthenticator高阶组件

在配置参数中同时指定初始状态和隐藏规则，或自定义SignIn组件强制生效：

import { withAuthenticator, Authenticator } from '@aws-amplify/ui-react-native';
import { View, Text } from 'react-native';

function HomeScreen() {
  return <Text>登录成功页面</Text>;
}

export default withAuthenticator(HomeScreen, {
  initialState: 'signIn',
  hideSignUp: true,
  // 若上述配置无效，自定义SignIn组件覆盖默认逻辑
  components: {
    SignIn: (props) => <Authenticator.SignIn {...props} hideSignUp={true} />
  }
});

方案2：适配旧版aws-amplify-react-native（已废弃）

如果项目仍在用旧版aws-amplify-react-native包，确保配置参数传递正确：

import { withAuthenticator } from 'aws-amplify-react-native';
import App from './App';

// 确认第二个参数为配置对象，hideSignUp直接置于顶层
export default withAuthenticator(App, { hideSignUp: true });