如何正确延迟渲染

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

应用.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和loginlogin默认情况下将呈现屏幕。但是，我添加了此逻辑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