标签: ionic-react

我想以可靠的方式找出 DOM 元素的尺寸。

我的考虑是为此使用 getBoundingClientRect 。

  const elementRef = useRef<HTMLUListElement | null>(null);
  const [dimensions, setDimensions] = useState<DOMRect | undefined>();

  const element: HTMLUListElement | null = elementRef.current;

  /**
   * Update dimensions state.
   */
  const updateDimensions = useCallback(() => {
    if (!element) return;

    setDimensions(element.getBoundingClientRect());
  }, [element, setDimensions]);

  /**
   * Effect hook to receive dimensions changes.
   */
  useEffect(() => {
    if (element) {
      updateDimensions();
    }
  }, [element, updateDimensions]);

这种方法的问题是 useEffect 只对 elementRef.current 做出反应，而不对 rect 的变化做出反应。显然浏览器中组件的绘制还没有完成，因为尺寸总是0。

如果我在 useEffect 之外做整个事情，那么它就可以工作。在控制台中，我看到 0 的 2 倍值，然后是正确的尺寸。

使用效果： …

我正在构建 Ionic React 应用程序，并且 ionic 的版本是 5。在我的应用程序中，我有底部导航。App.tsx中底部导航的逻辑我已经提到了。

我在仪表板页面上有一个添加按钮，单击该按钮我希望打开一个不包含底部导航的页面。我在互联网上得到了很多关于 Ionic-Angular 的答案。我特别在寻找答案 Ionic-React。

App.tsx    
     <IonContent>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/profile" component={Profile} exact={true} />
              <Route path="/dashboard" component={Dashboard} exact={true} />
              <Route path="/dashboard/addInfo" component={Info} exact={true} />
              <Route path="/" render={() => <Redirect to="/dashboard" />} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={profile} />
                <IonLabel>Profile</IonLabel>
              </IonTabButton>
              <IonTabButton tab="dashboard" href="/dashboard">
                <IonIcon icon={grid} />
                <IonLabel>Dashboard</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonContent>

我目前在尝试将 Google Firebase 身份验证集成到 React Ionic 移动应用程序中时遇到一些问题。到目前为止，我已经能够将应用程序设置为在网络和 Android 上正确运行，但在 IOS 上反复遇到问题。该代码在 Android 上正确运行Firebase 身份验证登录，但似乎无法在 IOS 上运行。

对“signInWithEmailAndPassword”的初始调用似乎工作正常并返回“auth/multi-factor-auth-required”，但每当我尝试在 ios 上调用“ verifyPhoneNumber ”时，我都会收到“Firebase：内部验证”的响应发生了 AuthError。（auth/internal-error）”，返回的错误的任何部分都没有提供进一步的详细信息。

//Firebase setup in seperate file with code like these 2 lines 
app.initializeApp(config);
const firebaseAuth = app.auth();
//

firebaseAuth
.signInWithEmailAndPassword(email, password)
.then(function (user) {
        //other code
})
.catch(function (error) {
        if (error.code === "auth/multi-factor-auth-required") {
            let resolver = error.resolver;
            setTimeout(() => {
                phoneAuth(appVerifier, resolver);
            }, 2000);
      } else {
          //other code
      }
});

//following code is part …

我运行命令 ionicgeneratepages/login 但返回此错误

由于您使用的是 React 项目类型，因此此命令将不起作用。Ionic CLI 不知道如何为 React 生成框架组件

我只是尝试按照说明从 ionic x React 文档构建一个待办事项应用程序，但是当我尝试要求时出现此错误（查看图像） 这是我的代码，有人看到我用错误的方式做了什么吗？

import { IonContent,
     IonHeader,
     IonPage,
     IonTitle,
     IonToolbar,
     IonList,
     IonItem,
     IonCheckbox,
     IonNote,
     IonLabel,
     IonBadge,
     IonFab,
     IonFabButton,
     IonIcon} from '@ionic/react';
import React from 'react';
import { add } from 'ionicons/icons';

const Home: React.FC<RouteComponentProps> = (props) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Awema</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonList>
          <IonItem>
            <IonCheckbox slot="start" />
            <IonLabel>
              <h1>Create Idea</h1>
              <IonNote>Run Idea by Brandy</IonNote>
            </IonLabel>
            <IonBadge color="success" slot="end">
              5 Days
            </IonBadge>
          </IonItem>
        </IonList>
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton onClick={() => props.history.push('/new')}> …

我正在尝试使用电容器来实现本地通知。

首先我使用以下命令安装插件，

npm install @ionic-native/local-notifications
npm install cordova-plugin-local-notification

然后在我的 .js 文件中，我添加了以下代码

import { Plugins } from '@capacitor/core';

和

scheduleNotification = () => {
 Plugins.LocalNotifications.schedule({
    notifications: [
      {
        title: "Title",
        body: "Body",
        id: 1,
        schedule: { at: new Date(Date.now() + 1000 * 5) },
        sound: null,
        attachments: null,
        actionTypeId: "",
        extra: null
      }
    ]
  });
console.log('scheduled notifications');

}

我尝试了所有方法，但在运行 iOS 12 的 iPhone 6s 上看不到任何本地通知。当我检查 Xcode 日志时，我可以看到 id 为 1 的计划通知。

cordova-plugin-badge (0.8.8)
cordova-plugin-device (2.0.3)
cordova-plugin-local-notification (0.9.0-beta.2)

我为 ios 和 android 构建了一个应用程序，它在 iphone 11 和 IOS 15 中完美运行。但是在 iphone 11 和 ios 14 中提出问题。当我在 ios 14 中安装应用程序时，它显示空白屏幕，只有我的主题光和暗正在工作没有其他按钮起作用。

我的配置在这里：

我创建了一个带有来自 cli 的 tabs starter 模板的 ionic react 应用程序，并将登录功能添加到现有结构中。

我做了什么 ：

应用程序.tsx

  const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/profile" component={Profile} exact={true} />
          <Route path="/history" component={History} />
          <Route path="/login" component={Login} exact={true} />
          <Route path="/" component={Login} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="profile" href="/profile">
            <IonIcon icon={personCircleOutline} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
          <IonTabButton tab="history" href="/history">
            <IonIcon icon={documentTextOutline} />
            <IonLabel>History</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

问题是我在登录屏幕上看到了所有选项卡。我希望选项卡仅在用户登录后显示。

工作演示在这里

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

我正在使用Ionic React应用程序，对于构建 ionic React 应用程序来说是全新的。目前，我正在尝试通过在用户登录/注册期间获取android/iOSOTP的直通消息来自动填充 OTP（一次性密码） 。目前，每次新注册/登录时，OTP 都会通过默认 SMS 服务发送给用户。因此，当 OTP 到达用户时，用户可以手动键入 OTP，也可以从消息中复制 OTP 并将其粘贴到 Web 应用程序中。因此，目前用户可以从消息中复制 OTP 并粘贴（有将触发的handlePaste函数），但是Twilio's

Your OTP is: 123456.

@domain.com #123456