问题标签 [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 投票
1 回答
370 浏览

ionic-framework - 带有 Ionic v5 (react) 的 React-testing-library 和 react-hook-form-change 事件不会触发

我正在尝试测试使用Controllerfrom react-hook-formwith渲染的组件react-testing-library

当我使用一些模拟数据渲染组件时,默认值与预期一致。但是,当我开始更改值时,事件似乎没有触发。从这篇博文看来,ionic 导出了一组测试工具来处理 ionic 的自定义事件。在我的设置之后,setupTests.ts我尝试同时使用 RTU 的 ionFireEvent 和 fireEvent ,当我使用debug(). 我已经设置好了,所以我可以同时使用fireEventionFireEvent测试:

我也尝试将 data-testid 属性移动到控制器而不是这里IonInput建议的,结果是一样的:没有事件被触发。

以下是我正在使用的版本:

这是我为演示而创建的一个仓库。

任何帮助将非常感激!

0 投票
1 回答
596 浏览

reactjs - 如何在 Ionic React 中动态更改图像?

我对 React 和 TypeScript 很陌生,我遇到了这个问题:

在我的 UI 中,我使用了几个装饰图形,如下所示:

现在,我有一个暗模式切换。当它触发时,我想用适当的暗模式版本替换所有图像。我在想这样的事情:

现在,在 React 中我有两个问题: .src-attribute 是未知的,因为element它不一定是图像,第二个问题是:我没有将 URI 分配为 src,而是从导入中分配变量。所以实际上没有我可以更改的字符串......如果我被正确告知,React 使用 Base64 来处理以这种方式指定的图像。

我怎样才能在 React 中实现我的目标?

编辑:App.tsx

0 投票
1 回答
795 浏览

javascript - 类型参数不可分配给 partial<> 类型的参数

我正在尝试验证我的 Ionic 反应表单,但是在useForm方法中调用 validationSchema 时出现以下错误。我在尝试调用 validationSchema 时遇到的错误useFormArgument of type '{ validationSchema: ...... is not assignable to parameter of type 'Partial<{ mode: "onBlur"......下面是我的主登录表单代码:

我主要关注中间件(API 开发)和后端。前端方面不多。如果我的问题没有正确表达,我深表歉意。

此外,如果我将状态设置为''请参阅以 (1) 开头的注释,我无法在输入字段中输入任何内容。

我用来设置 loginProps(loginInput.ts 文件)的界面是:

0 投票
1 回答
273 浏览

javascript - IFormContext 只引用了一个类型,但在这里用作值

我正在尝试为离子反应形式建立验证。在我这样做之前,我需要获取输入的状态值。我有一个字段组件,它描述了字段、一个表单结构组件和需要上述两个组件的表单页面。以下是我的表单字段代码:

下面是表单结构的代码:

以下是我的 resetForm 页面代码:

在表单结构代码中,我收到错误消息'IFormContext' only refers to a type, but is used as a value here。我不明白这里的问题。我明白了,因为 IFormContext 是一个接口,所以它在这里是一种类型。如果是一堂课,我不会有问题。但这里需要是一个接口。

0 投票
2 回答
323 浏览

reactjs - 无效的钩子调用。Hooks 只能在函数组件的主体内部调用

请查看elfe-if以下代码中条件内的验证方法。我无法useLocation调用react-router-dom. 我在网上看到过问题,其中一个类似这样: Invalid hook call。但解决方案建议从类更改为函数。它可能不是我的解决方案,因为我在表单验证期间使用我的类的实例来查找值。

0 投票
2 回答
142 浏览

javascript - 如何在使用此关键字的方法中设置类变量的状态

我正在尝试在我的 Ionic react 应用程序中显示重置服务的结果。我无法使用,this.setState({resetSuccess})因为我试图在一个方法中这样做,并且this会引用该方法的范围。(我也在评论中提到了这个问题)

请参考以下代码:

这是我的渲染功能:

0 投票
2 回答
1705 浏览

android - 如何在离子+反应+电容器项目中设置最低android版本支持?

我不知道如何设置要支持的最低 android 版本,创建的 apk 仅适用于新版本的 android,不适用于旧版本,我是一名网络开发人员,以前从未开发过任何与 android 相关的东西,应该我在 android studio 上安装了与该版本相关的 sdk 平台,或者我的开发文件中有某些配置要更改???

0 投票
1 回答
111 浏览

javascript - Ionic React Promise 在按钮单击设置状态后不等待

好的,我有以下问题:

单击按钮时,我想做一个 GET 请求来检索地址的纬度/经度数据,更新组件的状态,然后以更新的状态作为传递的数据进入下一页。

我的代码如下所示:

控制台记录了我这个:

老实说,我希望 history.push() 等到 await geocode(address) 解决以继续执行方法。

有人能告诉我我错过了什么吗?

0 投票
1 回答
772 浏览

android - “未找到 ID 为 'io.fabric' 的插件”错误。从 build.gradle 中删除织物后

在我使用电容器构建的 ionic react 项目 android 版本中,我遵循了移除所有织物并用 crashlytics 替换它们的步骤

参考:https ://firebase.google.com/docs/crashlytics/upgrade-sdk?platform=android

构建命令:

现在我只是在构建时遇到错误:

这是我的项目 build.gradle:

这是我的应用程序 build.gradle:

版本参考:

0 投票
1 回答
135 浏览

reactjs - 如何在 Ionic React 中添加全局组件(导航)

我正在尝试在我的 Ionic React 项目中添加一个全局导航/菜单栏组件,就像您在任何网站上所做的那样。

所以我创建了一个标准<Nav/>组件 i React,但似乎我只能将它添加到我的 Ionic 应用程序的特定页面中,而不是在我App.tsx设置路由器的文件中。

我的App.tsx组件如下所示:

我想像我通常在标准的 create-react-app 项目中所做的那样将我的添加<Nav/>到下面的第 4 行。<IonReactRouter>

但是,如果我这样做,<Nav/>则不会渲染,也不会出现错误。

那不可能吗?我需要添加<Nav/>到项目中的每个页面吗?