问题标签 [ionic-react]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
681 浏览

ionic-framework - 找不到名称“RouteComponentProps”。TS2304

我只是尝试按照说明从 ionic x react 文档构建待办事项应用程序,但是当我尝试要求时出现此错误(查看图片) *在页面上捕获结果* 这是我的代码,有人看到我用错误的方式做了什么吗?

0 投票
0 回答
52 浏览

ruby-on-rails-4 - 如何使用 Ionic 4 React with Rails 执行身份验证操作

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

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

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

0 投票
0 回答
218 浏览

javascript - 如何在反应离子中使用不同页面中的不同菜单项

我是反应离子的新手,想在不同的页面中显示不同的菜单项。我有一个菜单组件并将其包含在 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>

0 投票
0 回答
880 浏览

reactjs - Ionic 4 - [React] 如何使用外部按钮更改活动/选定的 IonTabButton

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

带有标签的组件:

仪表板(带有返回按钮的选项卡示例):

IonTabBar DOM 结果(当我打开一个 Tab 并单击按钮返回时):

0 投票
1 回答
1103 浏览

reactjs - 电容器插件在 android build 上显示为未定义

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

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

0 投票
0 回答
33 浏览

reactjs - 向后导航到 IonSlides 组件的最后一张幻灯片时无法打开 routerLink

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

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

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

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

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

0 投票
1 回答
1134 浏览

ionic-framework - 将 Ionic React 添加到现有的 React 项目

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

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

0 投票
1 回答
351 浏览

reactjs - 如何将 Azure 通知中心连接到 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 链接?谢谢。

0 投票
2 回答
3230 浏览

reactjs - React Ionic 5:如何将对象从 App 组件传递到 Tab 组件

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

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

有什么办法吗?

Tab1 和 Tab2 是我的标签组件。

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

我的 App 组件如下所示:

0 投票
1 回答
31 浏览

ionic-framework - Ionic 4 React 从页面底部开始

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

这是我的代码: