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

Question

好吧，我有一个非常简单的网站，网站的正文应该滚动，以便地址栏不再可见。 从这个话题看来，简单地调用以下方法应该可以解决问题：

window.scrollTo(0,1)

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

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 紧密耦合，那么我将如何“修复”这个问题？

Answer 1

你的代码有问题，

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

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

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

您可以使用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>
  )
}

演示

Answer 2

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

把它放在你的 index.html 下面！

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

或者你可以把它放在你的 app.js 代码中，就像下面这个 todo-list app 示例一样~

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;

干杯:)

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

问题描述

2 个解决方案

解决方案1
0 2019-07-14 02:14:24

解决方案2
0 2020-06-16 17:05:00

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

问题描述

2 个解决方案

解决方案1 0 2019-07-14 02:14:24

解决方案2 0 2020-06-16 17:05:00

解决方案1
0 2019-07-14 02:14:24

解决方案2
0 2020-06-16 17:05:00