如何正确延迟渲染

时间:2018-09-18 01:29:29

标签: reactjs react-native react-redux react-navigation redux-offline

// offline.js

import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

const config = params => ({
  ...offlineConfig,
  persistCallback: params.persistCallback
});

export default params => offline(config(params));

// App.js

class App extends Component {

  componentWillMount() {
    this.store = Reactotron.createStore(
      reducers,
      undefined,
      compose(
        applyMiddleware(ReduxThunk),
        offline({ persistCallback: this.startApp })
      )
    );
  }

  startApp = () => {
    if (this.store.getState().auth.loggedIn) {
      const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'summmary' })],
      });
      this.props.navigation.dispatch(resetAction);
    }
  }

  render() {
    return (
      <Provider store={this.store}>
        <MainNavigator />
      </Provider>
    );
  }
}

export default App;

我有两个屏幕summarylogin,其中login屏幕将默认显示。但是我添加了此逻辑this.store.getState().auth.loggedIn,以检查是否正确,然后将屏幕分发到summary,但我得到了Cannot read property 'dispatch' of undefined

2 个答案:

答案 0 :(得分:0)

导航道具可用于包装在MainNavigator中的Screen组件。

您正在尝试通过导航器外部的App组件使用它,因此未定义。

在这种情况下,建议按照文档中所述使用“不使用导航道具进行导航”方法: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

答案 1 :(得分:0)

由于没有作用域navigation对象,因此出现该错误。

理想情况下,您的App.js文件应具有StackNaviator类本身。因此,在那里声明的第一个对象将是您要进入的第一个屏幕。在那里,您还可以编写将其分派到另一个屏幕的逻辑,因为您还具有navigation对象在范围内。

-

您的App.js

createStackNavigator({
  Home: {
  screen: HomeScreen}
})

因此,您的主屏幕将首先启动,您在App.js中编写的有关分派操作的逻辑可以移至此HomeScreen