如何在反应应用程序中在移动设备上“隐藏地址栏”？答案

【问题标题】：How to "hide the address bar" on mobile in a react app?如何在反应应用程序中在移动设备上“隐藏地址栏”？
【发布时间】：2019-11-23 05:25:57
【问题描述】：

我有一个非常简单的网站，网站的主体应该滚动，这样地址栏就不再可见了。从this 主题看来，只需调用以下内容就可以解决问题：

window.scrollTo(0,1)

但是在我的 react 应用程序中这根本不起作用，该应用程序是：

import * as React from 'react';
import {Route, Router} from 'react-router';
class App extends React.Component<PropTy> {
    componentDidMount() {
        console.log('ok');
        window.scrollTo(0, 1);
    }
    render() {
        return (<div style={{height: '100vh', position: 'relative'}}>
            text
        </div>);
    }
}

export default App;

我可以手动向下滚动（在移动设备上）。但是它不会自动执行此操作 - 但我确实在控制台中看到“ok”。

index.html 和 manifest.json 与默认的 create-react-app 几乎没有变化：

<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#7B0000">
    <meta name="Description" content="Spots platform, event calendar, enroll">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>AllSports</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root" ></div>
  </body>
</html>

是什么导致浏览器忽略scrollTo() - 我尝试了不同的滚动偏移量，但它们似乎都不起作用？

我也试过修改 index.html：

<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#7B0000">
    <meta name="Description" content="Spots platform, event calendar, enroll">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>AllSports</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root" style="height: 100vh; position: relative;"></div>
  </body>
</html>

但这似乎也不起作用。

我现在注意到（感谢您的评论）这是由于反应路由器导入造成的。如果我删除它“工作”的导入。 - 然而，该应用程序与 react-router 紧密耦合，那么我将如何“修复”这个？

【问题讨论】：

你不会碰巧在这个应用程序中使用react-router吧？
@SébastienRenauld 我是，但我不明白这有什么影响？（在测试中我什至没有“使用”它，只是导入它）
类似的事情和它有一些乐趣，特别是在实现类似滚动到顶部的功能时。
您在使用react-router时找到解决方案了吗？
@John 我实际上发现解决方案是“什么都不做”。无论我做什么，地址栏都会在输入菜单获得焦点时出现。即使我手动向下滚动。因此，window.scrollTo(0, 1) 的解决方案不起作用。 -- 因为我们应用程序中的搜索栏总是获得焦点；

标签： javascript reactjs mobile

【解决方案1】：

你的代码有问题，

componentDidMount() {
   console.log('ok');
   window.scrollTo(0, 1);
}

componentDidMount 只会在您的组件第一次加载时执行一次，而不是任何后续渲染。所以这段代码可能会执行一次。

您看不到的效果是因为window.scrollTo(0, 1) 接受pixel 中的参数，因此您的页面可能会垂直滚动1px 而您看不到它。 Ref.

您可以使用scrollIntoView 和ref 来实现这一点，

import React, {useRef, useEffect} from 'react'
import ReactDOM from 'react-dom'

function App() {
  const scrollInto = useRef(null)
  useEffect(() => {
    scrollInto.current.scrollIntoView()
  })
  return (
    <div>
      <h2>Header</h2>
      <div ref={scrollInto}>Scroll till here</div>
      <h2>
        Below dummy text is to get scroll on page so tht our code will work.
      </h2>
      <div>
        More data here
      </div>
    </div>
  )
}

Demo

【讨论】：

感谢您的回答，但我注意到在我的情况下它并没有“修复”它。 - 我的问题显然是由于 react-router 交互造成的。
@paul23 不是。我要求确定是不是这样:-)
它会“滚动”，但是在滚动时它不会隐藏地址栏。（这是帖子的全部目标，滚动只是我发现它可能的一种方式）。 imgur.com/a/YfLzbUQ -- 如果我手动滚动地址栏会移开。
你的标题是固定的吗？
如果您不使用https，地址栏不会消失。

【解决方案2】：

这是一个运行良好的单行代码解决方案。 :)

只需将其放在您的 index.html 中！

<meta name="apple-mobile-web-app-capable" content="yes" />

或者您可以将其放入您的 app.js 代码中，如下面的待办事项列表应用示例 ~

import React, { useState, useCallback, useRef } from 'react';

const App = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: 'todo item one'
    },
    {
      id: 2,
      text: 'todo item two'
    },
    {
      id: 3,
      text: 'todo item three'
    }
  ]);


  const nextId = useRef(4);

  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false
      };
      setTodos(todos.concat(todo));
      nextId.current += 1;
    },
    [todos],
  );

  return (
    <div>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <TodoTemplate>
        <TodoInsert onInsert={onInsert} />
        <TodoList todos={todos} />
      </TodoTemplate>
    </div>
  );
}

export default App;

干杯:)

【讨论】：

这个元标记不仅仅是隐藏地址栏。当作为 PWA 打开时，后退按钮/手势不再存在（无论清单如何）。