问题标签 [ionic-react]

我只是尝试按照说明从 ionic x react 文档构建待办事项应用程序，但是当我尝试要求时出现此错误（查看图片） 这是我的代码，有人看到我用错误的方式做了什么吗？

我正在参加一个黑客马拉松，并尝试使用我以前从未使用过的 Ionic 4 (react) 连接到我制作的 Rails 数据库（在后端完成身份验证），该数据库托管在 heroku 上。我真的只需要在前端将身份验证操作连接到它，我遇到了很多问题，我找到的所有答案都在 Angular Ionic 中，而不是在 React Ionic 中。

该应用程序非常简单，实际上只包含 4 个主页面，一个是起始页，一个是资源页面，一个是主页，另一个是登录页面。登录页面将有一个注册和登录按钮（未通过身份验证时）和更改密码并退出（通过身份验证时）。我有单独的页面用于登录、注册和更改密码。我在文档中查看了示例，但没有找到，有没有我可以使用类似的示例/我该如何学习如何做到这一点？任何输入都非常有帮助，谢谢！

到目前为止，这就是我所拥有的垃圾，主要来自：

我是反应离子的新手，想在不同的页面中显示不同的菜单项。我有一个菜单组件并将其包含在 App.tsx 中。但是每个页面都显示相同的菜单项。任何帮助将不胜感激。

提前致谢

const appPage: AppPage[] = [ { title: 'Home', url: '/home', icon: home }, { title: 'Register', url: '/home/register', icon: home }, { title: 'Login', url: '/home/login', icon: home } ];

这是菜单 interface MenuProps extends RouteComponentProps { appPages: AppPage[]; } 常量菜单：React.FunctionComponent = ({appPages}) => (<IonContent className="menu_list"> <IonList className="ion-padding-menubar"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} autoHide={true}> <IonItem routerLink={appPage.url} routerDirection="none"> <IonLabel color="light">{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent>

我有 6 个 IonTab，第一个选项卡将您的按钮隐藏为“主页”。其他选项卡正常工作，并有一个返回“主页”（第一个选项卡）的按钮，此按钮重定向到“主页”，但不会更改 IonTabBar DOM 中的道具“selected-tab”。如何在不单击可见 IonTabButtons 之一的情况下更改此道具？

带有标签的组件：

仪表板（带有返回按钮的选项卡示例）：

IonTabBar DOM 结果（当我打开一个 Tab 并单击按钮返回时）：

这是我找到的一个电容器插件https://github.com/JhonArlex/capacitor_qrcode 我希望它将它集成到我的 ionic 应用程序中，在 web 服务上它按预期工作，但是当我在 android 上尝试 livereload 时，错误屏幕弹出出来并说插件未定义..

我正在使用 Ionic React Capacitor ...如果您能提出任何其他方式我可以在我的应用程序中集成 QR 码扫描功能，我将不胜感激！谢谢！

我有一个带有 5 张幻灯片的无限循环 IonSlides 组件。每张幻灯片都有一个 IonCard 组件，其中包含指向我应用程序中不同页面的 routerLink。

向前滚动幻灯片（例如/拇指从右到左），一切都很好 - 所有幻灯片都打开了正确的链接并且循环正常工作。

但是，当您向后滚动（拇指从左到右）并落在编码列表中的最后一张卡片（第五张卡片 - 无限循环中没有“最后一张卡片”）时，链接不再打开它只是重定向到失败时的主页。每隔一张幻灯片可以向后滚动，链接将正确打开。它只是 IonSlides 组件中存在此问题的最后一张卡片。

为了验证这一点，我在列表的第 6 张幻灯片上添加了一张空白幻灯片（因此它将位于最后一个位置）。现在，当向后滚动第五张卡片时，将正确加载链接。因此，我认为 IonSlides 轮播的最后一张卡片在向后滚动时存在问题。

这个问题让我很困惑，如果有人有任何想法/修复我很想知道，谢谢。

使用这个链接，我已经成功地在我现有的 React 项目中添加了最基本的代码。我现在很困惑的是下一步该怎么做？如何从现有的 React 项目中创建应用程序？我想，我需要让这个项目成为一个 Ionic 项目。但是我该怎么做呢？

这是我到目前为止根据教程所做的。React 应用程序在我的网络浏览器上运行良好。

我有一个连接到 FCM 实例的 Azure 通知中心。我可以使用 Firebase 控制台向我的应用发送通知。有一个组件可以注册我的设备并更改链接设备和 FCM 的 build.gradle 文件（遵循本指南https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/ 111/ )。但我想改用 Azure 通知中心。

需要在 gradle.build/google-services.json/任何其他文件中添加什么才能使应用与 Azure 链接？谢谢。

我使用 Ionic 5 选项卡模板创建了一个 Ionic React 应用程序。

我想将一个对象从 App 组件传递给选项卡组件。

有什么办法吗？

Tab1 和 Tab2 是我的标签组件。

注意：我希望这个对象在两个 Tab 组件中都使用双向数据绑定，即每当该对象在一个 Tab 组件中更改时，它必须在第二个 Tab 组件中更新。我想在不使用 Redux 或任何第三方的情况下实现它图书馆。

我的 App 组件如下所示：

我正在使用 Ionic 4 React 并尝试制作一个简单的聊天应用程序。当用户加载聊天页面时，我想在页面底部自动启动。最简单的方法是什么？

这是我的代码：