问题标签 [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 回答
185 浏览

reactjs - 使用 ExploreContainer 模板在 Ionic React 中进行编程导航

我正在使用 Ionic React 的侧边菜单模板,所以我的大部分逻辑都在 ExploreContainer.tsx 中。

现在,由于我正在为移动设备构建它,因此我正在使用电容器。这使我能够监听硬件后退按钮事件。当用户按下他们的后退按钮时,我希望他们在这个例子中回到“主页”。我发现的所有答案总是指导航按钮,可以在其中声明自定义状态并可能使用<Redirect />组件。

现在,为了扩展前一个示例,假设我想要这样的东西:

可悲的是,这不起作用。以前我尝试过以下方法:

然而,这会导致一些非常丑陋的行为。应用程序完全重新加载,所有变量都被重置,等等。

如果我理解正确, 的name属性ExploreContainer是当用户从菜单中选择一个项目时改变的状态,所以通常应用程序不需要重新加载。

我该怎么办?

0 投票
3 回答
613 浏览

typescript - 图像未在 Ionic React 中显示

我想显示一个 .svg 图像,它位于我src目录的 assets 目录中。

这是文件夹结构的一瞥 -

在此处输入图像描述

我想balloons.svgRegister.tsx. 我正在使用该IonImg元素并尝试过像../assets/balloons.svg源这样的目录,但它们似乎不起作用。

注意:如果我使用图像 URL 作为源,图像会正确显示。

0 投票
1 回答
401 浏览

reactjs - 带有 pug.js 的 Ionic React Typescript,使用 tsx 但不使用 jsx 时出现“未捕获的 ReferenceError:React 未定义”

问题:react-app-rewired start适用于 App.jsx(也适用于 .js)但不适用于 App.tsx(也适用于 .ts)

脚步

  1. 我创建了一个样板应用程序ionic start my-app blank --type=react --capacitor
  2. 在 package.json 上,我相应地替换并重新安装(删除 package.lock.json,npm i
  1. config-overrides.js在项目的根文件夹中添加文件
  1. 将 App.tsx 替换为
  1. 现场tsconfig.json_"strict": false
  2. npm start(或react-app-rewired start)在项目根文件夹中

终端上没有错误('编译成功!'),chrome 屏幕是空白的,在 chrome 控制台上:

奇怪的是,如果我用 .jsx 或 .js 而不是 .tsx 或 .ts 更改应用程序扩展名,该应用程序可以正常工作

设置 CRA 打字稿应用程序而不是ionic start --type=react --capacitor应用程序时,哈巴狗设置也适用

编辑:这是工作/不工作回购的 github https://github.com/calvindio/template-ionic-react-ts-pug

0 投票
1 回答
390 浏览

reactjs - Ionic React props.match.params 不更新

我正在建立一个网站来展示带有 React 和 Ionic 的房地产。

我的App.tsx中有这个路由

我链接到"/property/:id"我网站中的单个页面,如下所示:

现在在我的"/property/:id"页面上,我可以像这样从 URL 访问 id:

问题是,当我点击返回说主屏幕,然后访问我的另一个"/property/:id"页面时,它props.match.params.id保持不变。它不更新。

可以做些什么来修复它?

0 投票
0 回答
229 浏览

reactjs - React Hook Forms/Ionic React:根据输入值的变化自动完成输入值

项目要求根据输入值的变化来满足输入值;例如:cash 和 pos 是两个字段,有一个全局价格,价格为 70,如果用户输入现金 50,则 pos 必须履行为 20,而如果用户输入 30 为 pos,则必须兑现现金40.

我们将Ionic React输入用于表单,使用React Hook Form进行验证,并使用以下代码:

虽然它正在工作,但有一个问题:倾斜。

在此处输入图像描述

onChanging输入不能像那样倾斜,它必须继续编辑而不是将其替换为一个值,因为它可以正常工作,但我不知道如何做到这一点。

有什么办法吗?

谢谢你。

0 投票
0 回答
1071 浏览

ionic-framework - React-Hook-Forms 和 Ionic - 如何使用表单外的按钮提交表单

我们如何使用 react-hook-form 和 ionic 在表单之外触发表单提交。我相信我们可以使用按钮上的表单属性来做到这一点,但离子按钮不允许 IonButton 上的表单属性

下面的代码最初在 chrome 中工作,突然停止工作,而且这段代码在 safari 浏览器上也不起作用。看起来 Ionic 会释放按钮上的 form 属性,但是直到我们在 Ionic 按钮上得到解决的 form 属性,我正在尝试找到一种适用于所有浏览器的解决方法

0 投票
1 回答
386 浏览

ionic-framework - 离子+反应。侧边菜单和选项卡一起只有默认选项卡正在工作其余两个选项卡变为空白

我将 Ionic 与 React 一起使用。

在我的应用程序中,我同时拥有侧边菜单和选项卡。

在选项卡中,只有默认选项卡正常工作,其他选项卡显示空白屏幕。

问题看起来像这样

我的代码如下:

1. App.tsx 如下所示

在此,下面的路线打开一个标签页

2. Tabs.tsx 看起来如下

3. Tab1.tsx 长这样

其他选项卡 Tab2.tsx 和 Tab3.tsx 看起来完全一样。

0 投票
1 回答
1654 浏览

ionic-framework - 如何使用 Ionic 5-React 在 IonGrid 上启用水平滚动

如何使用 IonCard 在 IonGrid 上启用水平滚动。下面是我试图启用水平滚动的代码,以便所有字段都将显示在任何设备或浏览器的同一行中

0 投票
0 回答
67 浏览

reactjs - 在 Ionic-React 项目中导入 react-native 库

我只是尝试在我的ionic react项目中使用react-native-svg ,并且能够使用 react-native-web 使其成功。但是,如果我确实像这样导入

它说

找不到模块 react-native。

我该如何解决这个问题?

在此处输入图像描述

0 投票
1 回答
221 浏览

ionic-framework - 带离子载玻片的离子反应转盘

在 Ionic-React 中如何使用离子幻灯片创建轮播并希望在 IonList 中使用它,因此图像可以是缩略图或头像。我尝试更改 CSS 但没有运气,而且自动播放也不起作用。

想要纯粹在 ionic 中使用它,以便也可以在移动设备上访问它。