反应原生:导出具有多个模块包装的默认应用程序

Question

我在我的反应原生项目中有以下应用程序.js：

class App extends Component {
    render() {
        return (
          <ApolloProvider store={store} client={client}>
        <AppWithNavigationState />
        </ApolloProvider>
      );
    }
}
export default App = codePush(App);

我正在尝试将 aws 放大身份验证器添加到我的项目 (https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development(，但步骤告诉我添加：

export default withAuthenticator(App);

^^ 当我已经将代码推送包裹在我正在导出的应用程序组件周围时，我该如何做到这一点？

Answer 1

TL;DR：withAuthenticator基本上是一个高阶组件，它接受一个组件，装饰它(即提供一些特殊的道具或各种自定义(，并返回一个由你传入的组件组成的新组件。因此，在您的情况下，如果您想要多个 HOC，您可以简单地说 -

export default withAuthenticator(codePush(App))

从可读性的角度来看，如果您有 5 个装饰器，则此语法可能会令人讨厌。在这种情况下，使用新的装饰器语法很有用。有了它，您可以做一些整洁的事情，例如 -

@mySpecialDecoratorThatDoesNiceThings
@withAuthenticator
@codePush
export default class App extends Component {
...
}

如果您使用的是 babel，请查看此转换装饰器 babel 插件，以确保装饰器正确转译。