Question

运行以下代码段导致路由器抛出

import React from 'react';
import {Scene, Router} from 'react-native-router-flux';

export default App extends React.Component {
  componentDidMount() {
      // This fails
      Actions.login();
  }

  render() {
    return (
      <Router>
        <Scene key="root" hideNavBar>
          <Scene key="login" component={Login} />
          <Scene key="main" component={Main} initial />
        </Scene>
      </Router>
    );
  }
}

路由器应该已经由App.componentDidMount安装，因此所有操作都应该正常工作。
如果我将超时设置为2秒，那么它确实有效。有没有人遇到过它？我在这里做错了吗？

Answer 1

所以最后我明白了问题所在。
问题不在于场景需要时间来初始化 Action.login需要有一个Actions.callback，路由器在第一次实际渲染后在根componentDidMount之后注入。

发生了什么：
根渲染函数称为
在没有state.reducer的情况下调用路由器渲染函数，所以什么都不做路由器componentDidMount被调用 - 这里Actions被初始化并且reducer被保存到状态（setState是async）。
Root componentDidMount - 这里回调仍未初始化称为路由器渲染 - 此调用由setState触发。现在注入Actions.callback。

因此，在第二次渲染之后，路由器被初始化。

我设法找到比任意setTimeout更好的解决方案您覆盖路由器渲染方法，并在使用数据渲染后立即通知父级：

class OverrideRouter extends Router {
    constructor(props) {
        super(props);
        this.render = this.overrideRender;
    }
    overrideRender() {
        const result = super.render();
        if (!result) {
            return result;
        }
        // after first initialization use the regular render.
        this.render = super.render;
        if (this.props.onRouterInitialize) {
            // need this setTimeout to allow this method to complete so that the Actions.callback is populated
            setTimeout(this.props.onRouterInitialize, 10);
        }
        return result;
    }
}

修改
我设法完全解决了问题并发送了拉取请求来解决它。 https://github.com/aksonov/react-native-router-flux/pull/1137

react-native-router-flux throws未定义Actions.callback

1 个答案: