标签: ionic-react

当单击该按钮时，我试图将弹出框放置在该按钮下方。这方面的一个例子在 Ion 文档页面上。

然而，React 中不提供此代码，仅在 Angular 中提供。

目前我的代码看起来像这样

...
<IonButtons slot="end">
                        <IonButton onClick={() => setShowPopover(true)} expand="block">
                            <IonIcon icon={more}/>
                        </IonButton>
                    </IonButtons>
                    <IonPopover
                        isOpen={showPopover}
                        backdropDismiss={true}
                        onDidDismiss={() => setShowPopover(false)}>
                        <IonItem>Popover Item</IonItem>
                    </IonPopover>
...

弹出框由其上方的按钮切换。当按钮被按下时，弹出框出现在页面中间，而不是按钮上方。如何更改此设置以便弹出框显示在按钮上？（就像图片一样）

谢谢

我添加了一个上下文，其中包含useReducer我的 Ionic React 应用程序的钩子。我看到一些奇怪的行为：当我通过调用更新上下文值时dispatch，页面上的消费者组件将被更新，但选项卡栏上完全相同的组件不会更新。

我按照这个教程进行了操作。

当我添加console.log语句来检查组件是否正在重新加载时，我发现<TabBarCounter>即使上下文值已更改，放置在选项卡栏 ( ) 中的组件也没有重新加载。

当我添加语句来检查上下文提供程序中的重新渲染时，我发现调用console.loga 时它也不会重新渲染。dispatch

上下文似乎是在本地更新，而不是全局更新。这个答案中有一条评论：

您正在使用减速器正确更新状态，但它只会更新本地组件状态，而不是全局上下文状态。

这听起来很像我在这里遇到的问题。

这是一些代码：

MyContext.tsx

export const CountContext = React.createContext<any>({} as {
  countState: CountState,
  countDispatch: React.Dispatch<CountReducerActions>,
});

interface MyProps {
  children: JSX.Element,
}

const reducer = (countState: CountState, action: CountReducerActions) => {
  switch (action.type) {
    case 'add1': {
      countObject.total += 1;
      return countObject;
    }
    default: {
      throw new Error();
    }
  }
};

export const …

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

import "capacitor_qrcode";
import { Plugins } from "@capacitor/core";

//..

await Plugins.QRCodePlugin.getCodeQR();
// QRCodePlugin is undefined?

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

我正在尝试通过为自己创建一个简单的应用程序来学习 Ionic React with Typescript。

此时，“我正在尝试从数组动态填充 IonSegment，相关代码如下所示：

const [items, setItems] = useLocalStorage([{ id: 0, value: 'Item 0' }, { id: 1, value: 'Item 1' }, { id: 1, value: 'Item 1' }], [{ id: 0, value: 'An Error Occurred' }]);

....

<IonSegment color="brand" onIonChange={ ....... } value={sensor} id="segSensor">
            {items.map(item => {
              return (
                <IonSegmentButton key={item.id}>
                  <IonLabel>{item.value}</IonLabel>
                </IonSegmentButton>
              )
            })}
</IonSegment>

编译失败，输出如下：

参数“item”隐式具有“any”类型。ts(7006)

所以，我知道该项目需要声明类型，但我尝试了以下操作但没有成功：

{items.map(item:any => {
              return (

{items.map(<any>item => {
              return (

如何声明项目的类型？

谢谢

我在 Ionic 5 中有一个 React 应用程序，我想向其中添加一些自定义 SVG。

这个问题是关于 Angular 的，但我的问题是关于 React 的。

我的应用程序文件夹结构如下所示：

• 源代码
  • 资产
    • 听.svg
    • SvgListen.tsx

这是SvgListen.tsx：

import React from 'react';
import { ReactComponent as ListenSvg } from './listen.svg';
import { IonIcon } from '@ionic/react';

const SvgListen = () => (
  <>
    <ListenSvg />
    <IonIcon src="./listen.svg" font-size="48px" />

  </>
);

export default SvgListen;

在 Chrome 中测试应用程序时，我得到以下 HTML：

<ion-icon src="./listen.svg" font-size="48px" role="img" class="ios hydrated"></ion-icon>

我<ListenSvg />导入的显示正确；但是，不显示离子图标。也没有错误消息。

我查看了这篇博文，但那里概述的方法也没有成功。

如何<IonIcon>在 Ionic 5 中显示自定义 …

我在 ionic react 应用程序中有一个选项卡导航页面，我想向该页面添加一个侧边菜单，我知道我必须使用 IonMenu 组件，但我正在努力将两者合并。这是我的代码，指示我如何实现标签导航：

import React, { Component } from "react";
 import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from "@ionic/react";

import { Redirect, Route } from "react-router-dom";
import { IonReactRouter } from "@ionic/react-router";
import { home, at, albums,addCircleOutline } from "ionicons/icons";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import Tab3 from "./Tab3";
import Tab4 from "./Tab4";

class Home extends Component {
  render() {
    return (
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} exact={true} />
            <Route path="/tab2" …