React Native：導出具有多個模塊包裝的默認App

Question

我的本機項目中有以下App.js：

class App extends Component {

    render() {
        return (
          <ApolloProvider store={store} client={client}>
        <AppWithNavigationState />
        </ApolloProvider>

      );
    }

}
export default App = codePush(App);

我正在嘗試向我的項目中添加AWS Amplify Authenticator（ https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development ），但是步驟告訴我要添加：

export default withAuthenticator(App);

^^在已經將CodePush包裝在要導出的App組件周圍時，該怎么辦？

Answer 1

TL; DR： withAuthenticator基本上是一個高階組件 ，它接受一個組件，對其進行裝飾（即提供一些特殊的道具或各種自定義），並返回一個由您傳入的組件組成的新組件。因此，如果您要多個HOC，您可以簡單地說-

export default withAuthenticator(codePush(App))

如果您有5個裝飾器，那么從可讀性的角度來看，此語法可能會令人討厭。 在這種情況下，使用新的裝飾器語法很有用。 有了它，您可以做一些整潔的事情-

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

如果您使用的是babel，請查看此transform-decorators babel插件，以確保正確編譯了裝飾器。