0

我正在使用 React-Router 来导航我的移动应用程序。出于某种原因，我的组件在每次转换时都会卸载，然后在“返回”时重新安装。这会导致丢失状态和丢失滚动位置。我没有在任何地方做“ignoreScrollPosition”，所以我对可能导致这种情况的原因感到困惑。

我正在使用 Reflux 来管理我的状态并使用 Cordova/Phonegap 为手机编写应用程序。有没有人在使用 Cordova/Phonegap 之前遇到过这个问题？

这是我用于路由器的代码：

var React = require('react');
var Reflux = require('reflux');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render: function () {
        return (
            <RouteHandler/>
        );
    }
});

...

var routes = (
    <Route handler={App} path="/">
        <DefaultRoute handler={LaunchScreen} />
        <Route name="sample" path="/sample" handler={SampleScreen} />
        ...
    </Route>
);

Router.run(routes, function (Root) {
    React.render(<Root/>, document.body);
});
4

2 回答 2

1

我相信为了完成你想要的，你需要使用Router.HistoryLocation而不是默认的（HashLocation）。这是因为HistoryLocation使用 HTML5 历史 API（即pushState()）来处理 URL 导航，因此您可以在不重新安装组件的情况下使用浏览器的“返回”功能。

但是，每当发出初始页面加载请求时，您都必须修改服务器以加载正确的页面。我不确定您将如何为 Android 执行此操作，但这应该可以解决您的问题。

路由器示例：

Router.run(routes, Router.HistoryLocation, function (Root) {
    React.render(<Root/>, document.body);
});

服务器示例（带 Express 的节点）

app.get('*', function (req, res) {
  res.render('index');
});

React 路由器 - 历史位置

于 2015-08-21T19:32:22.153 回答
0

事实证明，这个问题与我对 Flexbox 的使用有关。我的身体没有滚动，而是它里面的一个元素。

我的 flexbox UI 看起来像这样：

+----------------+
|    .header     |
+----------------+
|                |
|    .content    |
|                |
+----------------+
|    .footer     |
+----------------+

body {
     display: flex;
     flex-direction: column;
     ...
}
.content {
     flex: 1;
     overflow-y: auto;
     ...
}

这意味着该.content元素正在滚动而不是文档正文。似乎 React-Router 跟踪文档正文的滚动位置。

因此，为了解决这个问题，我使用position: fixed并.header放弃.footer了使用 flexbox 以这种方式呈现核心 UI。结果，文档正文现在滚动并且 React-Router 跟踪它。

作为一个额外的好处，浏览器在绘制过程中似乎性能更高。

于 2015-08-24T15:27:22.880 回答