Question

使用Onsenui，我无法在推送页面后弹出页面（返回主页/第一页）。从第一个（已加载的）页面，如果我按下一个，然后另一个，我可以弹出最后一页（带我回到第二页），但不能弹出第二页回到最开始。

在调用popPage（）之前，this.props.navigator.pages的数组长度为2，但它表示堆栈为空，不会让我返回第一页。

第一页：

import Nearest from './Nearest';    
export default class Dashboard extends Component {  
      pushPage = (component, name) => {
        this.props.navigator.pushPage({ component: component, props: { key: name } });
      }
      renderToolbar = () => {
        return (
          <Toolbar>
            <div className='center'>Your CoffeeSpots Dashboard</div>
          </Toolbar>
        );
      }
      render() {
        return (
          <Page renderToolbar={this.renderToolbar}>
            <div style={{ textAlign: 'center' }}>
              <Button key="nearestButton" onClick={() => this.pushPage(Nearest, "nearest")}>Nearest Coffee Shops</Button>
              <Button key="trendingButton" onClick={() => this.pushPage(Trending, "trending")}>Trending Local Coffee Shops</Button>
            </div>
          </Page>
        );
      }

单击“最近”按钮会转到另一个页面，但显然不会显示正常“推送”页面的动画。

“最近”（第二个/之后）页面代码：

export default class Nearest extends Component {
  popPage = () => {
    console.log(this.props.navigator.pages.length)
    this.props.navigator.popPage();
  }
  pushPage = () => {
    this.props.navigator.pushPage({ component: Nearest, props: { key: 'nearest2' } });
  }
  renderToolbar = () => {
    return (
      <Toolbar>
        <div className='center'>Nearest Coffee Shops</div>
      </Toolbar>
    );
  }
  render() {
    return (
      <Page renderToolbar={this.renderToolbar}>
        <div style={{ textAlign: 'center' }}>
          <Button onClick={this.popPage}>
            Pop Page
          </Button>
          <Button onClick={this.pushPage}>
            Push Page
          </Button>
        </div>
      </Page>
    );
  }
}

同样，在第二页上，单击pop会显示一个错误，指出堆栈为空，即使我的console.log语句说堆栈有两个对象。

任何帮助都将不胜感激。

Answer 1

我找到了解决方案：

在我的BottomNav组件中，我返回了一个组件，当你需要返回一个组件时，堆栈中的第一个元素算作一个页面，（使它不为空） - 如果第一个元素是一个Tabbar，它就算作什么都没有。

Answer 2

换句话说，（AFAICT）您应该始终将具有页面作为最外层标记的pushPage（）组件

React Onsenui - ons-navigator的页面堆栈为空（无法返回主页）

2 个答案: