时间戳

首页 > 解决方案 > 创建在桌面和 Android 上工作的 React 应用程序，但在 IOS 上是空白的

regex - 创建在桌面和 Android 上工作的 React 应用程序，但在 IOS 上是空白的

问题描述

更新： 正如 Zachary Haber 所说，这是一个正则表达式问题。旧浏览器不支持某些符号。

我正在使用 Firebase 并做出反应，它在桌面上运行良好。但是，在移动设备上，有一个白屏。任何建议为什么？

这是应用程序： https ://land-ified.com

这是我的包 json 文件：

    {
  "name": "leavemailapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "dayjs": "^1.8.24",
    "firebase": "^7.14.4",
    "jwt-decode": "^2.2.0",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-modal": "^3.11.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "node-sass": "^4.14.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://land-ified.com/",
  "proxy": "https://europe-west3-leaveyourmail-4c1f1.cloudfunctions.net/api"
}

谢谢！

标签： regexreactjscreate-react-app

解决方案

Regex lookbehind 目前在 Safari 或 firefox 中不起作用。您需要弄清楚如何重写您的正则表达式以不使用此功能，因为它会导致您的应用无法在其中任何一个浏览器上加载。

在此处输入图像描述

https://caniuse.com/#feat=js-regexp-lookbehind

从 UserSettings.js 第 26 行：

const userReg = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/

从 validators.js 第 19 行：

export const isUsername = (username) => {
  // 8-20 characters only letter . _ and can start and end in letter No __ .. _. ._
  const regEx = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/
  return username.match(regEx)
}

至于正则表达式：

^(?=.{3,20}$)([a-zA-Z0-9]+([_.][a-zA-Z0-9]+)*)$应该匹配您尝试匹配的所有内容。

这使用展开循环的概念来匹配一个或多个字母数字字符，然后根据需要重复多次（后面有一个或多个字母数字字符的下划线或句点）。

[_.] 作为构造的特殊情况，允许我们删除其余的前瞻（除了长度前瞻），因为它们被主模式覆盖。

regex101带有一些基本字符串来匹配测试。

推荐阅读