如何正确延迟渲染

Question

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

我有2个屏幕summary和login，login屏幕将在默认情况下呈现。但是，我添加了这个逻辑this.store.getState().auth.loggedIn来检查它是否为真，然后将屏幕分派给summary，但我得到的是Cannot read property 'dispatch' of undefined

Answer 1

包装在MainNavigator中的屏幕组件可以使用导航属性。

您试图从您的应用程序组件中使用它，该组件在您的导航器的之外是，所以它是未定义的。

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

Answer 2

因为作用域中没有navigation对象，所以会出现这个错误。

理想情况下，您的App.js文件本身应该有StackNaviator类。所以，在那里声明的第一个对象，将是您将要到达的第一个屏幕。在那里，您可以编写将其分派到另一个屏幕的逻辑，因为您也在作用域中有navigation对象。

一些关于-

你的App.js

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

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