文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在一个反应应用中“隐藏地址栏”？

问如何在一个反应应用中“隐藏地址栏”？
EN

Stack Overflow用户

提问于 2019-07-14 01:47:09

回答 1查看 7.3K关注 0票数 0

我有一个非常简单的网站，网站的正文应该滚动，这样地址栏就不再可见了。从this主题来看，简单地调用follwing应该可以做到这一点：

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：

<!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>

但这似乎也行不通。

我现在注意到(感谢您的评论)，这是由于反应路由器导入。如果我删除导入，它“工作”。-应用程序是紧密耦合的反应-路由器，那么我如何“修复”这一点？

javascript

reactjs

mobile

回答 1

Stack Overflow用户

发布于 2020-06-16 17:05:00

这里有一个单行代码解决方案，效果很好。:)

只需把这个放在你的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;

干杯:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57023990

复制

相似问题

问如何在一个反应应用中“隐藏地址栏”？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个反应应用中“隐藏地址栏”？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个反应应用中“隐藏地址栏”？
EN