如何正确延迟渲染

Posted 2023-02-22

【中文标题】如何正确延迟渲染

【英文标题】：How to delay rendering correctly

【发布时间】：2019-02-21 23:10:06

【问题描述】：

//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;

我有两个屏幕summary 和login，其中login 屏幕将默认呈现。但是我添加了这个逻辑this.store.getState().auth.loggedIn 来检查它是否为真，然后将屏幕发送到summary 但我得到Cannot read property 'dispatch' of undefined

【参考方案1】：

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

您正尝试从您的导航器外部的应用组件中使用它，因此它是未定义的。

在这种情况下，建议使用文档中描述的“不使用导航道具导航”方法： https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

【参考方案2】：

您收到该错误是因为您没有 navigation 范围内的对象。

理想情况下，您的App.js 文件本身应该具有StackNaviator 类。所以，在那里声明的第一个对象，将是你登陆的第一个屏幕。在那里，您可以编写将其分派到另一个屏幕的逻辑，因为您在范围内也有 navigation 对象。

关于 -

你的App.js

createStackNavigator(
  Home: 
  screen: HomeScreen
)

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

【讨论】：

所有react-navigation相关的声明都定义在MainNavigator组件中