问题标签 [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.
ruby-on-rails-4 - 如何使用 Ionic 4 React with Rails 执行身份验证操作
我正在参加一个黑客马拉松,并尝试使用我以前从未使用过的 Ionic 4 (react) 连接到我制作的 Rails 数据库(在后端完成身份验证),该数据库托管在 heroku 上。我真的只需要在前端将身份验证操作连接到它,我遇到了很多问题,我找到的所有答案都在 Angular Ionic 中,而不是在 React Ionic 中。
该应用程序非常简单,实际上只包含 4 个主页面,一个是起始页,一个是资源页面,一个是主页,另一个是登录页面。登录页面将有一个注册和登录按钮(未通过身份验证时)和更改密码并退出(通过身份验证时)。我有单独的页面用于登录、注册和更改密码。我在文档中查看了示例,但没有找到,有没有我可以使用类似的示例/我该如何学习如何做到这一点?任何输入都非常有帮助,谢谢!
到目前为止,这就是我所拥有的垃圾,主要来自:
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>
reactjs - Ionic 4 - [React] 如何使用外部按钮更改活动/选定的 IonTabButton
我有 6 个 IonTab,第一个选项卡将您的按钮隐藏为“主页”。其他选项卡正常工作,并有一个返回“主页”(第一个选项卡)的按钮,此按钮重定向到“主页”,但不会更改 IonTabBar DOM 中的道具“selected-tab”。如何在不单击可见 IonTabButtons 之一的情况下更改此道具?
带有标签的组件:
仪表板(带有返回按钮的选项卡示例):
IonTabBar DOM 结果(当我打开一个 Tab 并单击按钮返回时):
reactjs - 电容器插件在 android build 上显示为未定义
这是我找到的一个电容器插件https://github.com/JhonArlex/capacitor_qrcode 我希望它将它集成到我的 ionic 应用程序中,在 web 服务上它按预期工作,但是当我在 android 上尝试 livereload 时,错误屏幕弹出出来并说插件未定义..
我正在使用 Ionic React Capacitor ...如果您能提出任何其他方式我可以在我的应用程序中集成 QR 码扫描功能,我将不胜感激!谢谢!
reactjs - 向后导航到 IonSlides 组件的最后一张幻灯片时无法打开 routerLink
我有一个带有 5 张幻灯片的无限循环 IonSlides 组件。每张幻灯片都有一个 IonCard 组件,其中包含指向我应用程序中不同页面的 routerLink。
向前滚动幻灯片(例如/拇指从右到左),一切都很好 - 所有幻灯片都打开了正确的链接并且循环正常工作。
但是,当您向后滚动(拇指从左到右)并落在编码列表中的最后一张卡片(第五张卡片 - 无限循环中没有“最后一张卡片”)时,链接不再打开它只是重定向到失败时的主页。每隔一张幻灯片可以向后滚动,链接将正确打开。它只是 IonSlides 组件中存在此问题的最后一张卡片。
为了验证这一点,我在列表的第 6 张幻灯片上添加了一张空白幻灯片(因此它将位于最后一个位置)。现在,当向后滚动第五张卡片时,将正确加载链接。因此,我认为 IonSlides 轮播的最后一张卡片在向后滚动时存在问题。
这个问题让我很困惑,如果有人有任何想法/修复我很想知道,谢谢。
ionic-framework - 将 Ionic React 添加到现有的 React 项目
使用这个链接,我已经成功地在我现有的 React 项目中添加了最基本的代码。我现在很困惑的是下一步该怎么做?如何从现有的 React 项目中创建应用程序?我想,我需要让这个项目成为一个 Ionic 项目。但是我该怎么做呢?
这是我到目前为止根据教程所做的。React 应用程序在我的网络浏览器上运行良好。
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 链接?谢谢。
reactjs - React Ionic 5:如何将对象从 App 组件传递到 Tab 组件
我使用 Ionic 5 选项卡模板创建了一个 Ionic React 应用程序。
我想将一个对象从 App 组件传递给选项卡组件。
有什么办法吗?
Tab1 和 Tab2 是我的标签组件。
注意:我希望这个对象在两个 Tab 组件中都使用双向数据绑定,即每当该对象在一个 Tab 组件中更改时,它必须在第二个 Tab 组件中更新。我想在不使用 Redux 或任何第三方的情况下实现它图书馆。
我的 App 组件如下所示:
ionic-framework - Ionic 4 React 从页面底部开始
我正在使用 Ionic 4 React 并尝试制作一个简单的聊天应用程序。当用户加载聊天页面时,我想在页面底部自动启动。最简单的方法是什么?
这是我的代码: