Shopify最近发布了他们的新@shopify/app-bridge,但我不清楚它应该如何与@shopify/polaris一起使用。
例如,我试图制作一个React组件,它将使用app-bridge和polaris来显示toast。
import React, { Component } from "react";
import * as PropTypes from "prop-types";
import { Toast } from "@shopify/app-bridge/actions";
import { Page } from "@shopify/polaris";
class Start extends Component {
static contextTypes = {
polaris: PropTypes.object
};
showToast() {
console.log("SHOW TOAST");
console.log(this.context.polaris.appBridge);
const toastNotice = Toast.create(this.context.polaris.appBridge, {
message: "Test Toast",
duration: 5000
});
toastNotice.dispatch(Toast.Action.SHOW);
}
render() {
this.showToast();
return (
<Page title="Do you see toast?">
<p>I do not see toast.</p>
</Page>
);
}
}
export default Start;
但它似乎没有派出行动。任何想法为什么不呢?请注意,我的应用程序包含在AppProvider中,并初始化了app-bridge。
ReactDOM.render(
<AppProvider
apiKey={process.env.REACT_APP_SHOPIFY_API_KEY}
shopOrigin={queryString.parse(window.location.search).shop}
>
<Start />
</AppProvider>,
document.getElementById("root")
);
有什么建议?
因此经过大量的调试后,我从Shopify中发现App Bridge内部,在采取任何行动之前,他们检查了localOrigin是否与appURL(在合作伙伴仪表板中输入的那个)匹配。在我的情况下,我有一个后端(heroku上的node.js用于身份验证)和一个前端(firebase上的反应包)我的应用程序通过点击后端开始,然后如果身份验证检出,它会重定向到前端。因此localOrigin不匹配...嗯,我很高兴能够解决这个问题,因为我失去了大量的睡眠。现在的问题是该怎么做...也许这可以用AppBridge更新?或者我应该考虑更好的设计?