react-native - undefined 不是一个对象(评估'component.router.getStateForAction')
问题描述
当我在模拟器上加载我的 react 本机应用程序时,我看到以下错误。它似乎与我对 react-navigation 的使用有关。但是在谷歌搜索错误时,我无法找到我所缺少的。
它在此代码段中调用“wrappedComponent”。
function WithAuth(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
ready: false,
session: null,
};
this.handleOnSignIn = this.handleOnSignIn.bind(this);
this.handleOnSignUp = this.handleOnSignUp.bind(this);
this.handleOnSignOut = this.handleOnSignOut.bind(this);
}
async componentDidMount() {
await LocalStorage.init();
let session;
try {
session = await Auth.currentSession();
} catch (err) {
console.log(err);
session = null;
}
this.setState({
session,
ready: true,
});
}
handleOnSignIn(session) {
this.setState({ session });
}
handleOnSignUp() { }
handleOnSignOut() {
Auth.signOut();
this.setState({ session: null });
}
render() {
const { ready, session } = this.state;
console.log('Rendering HOC', ready, !!session);
const {
onSignIn,
onSignUp,
doSignOut,
...otherProps
} = this.props;
return (
ready && (
<WrappedComponent
session={session}
onSignIn={onSignIn || this.handleOnSignIn}
onSignUp={onSignUp || this.handleOnSignUp}
doSignOut={doSignOut || this.handleOnSignOut}
auth={Auth}
{...otherProps}
/>
)
);
}
}
}
export default WithAuth;
它使用以下 app.js 代码:
Amplify.configure(awsmobile);
const App = createDrawerNavigator({
FirstScreen: {
screen: props => <First rootNavigator={props.navigation} screenProps={{ ...props.screenProps }} />,
navigationOptions: {
drawerLabel: ' ',
},
},
}, { initialRouteName: 'FirstScreen' });
const AppContainer = createAppContainer(props => <App screenProps={{ ...props }} />);
export default WithAuth(AppContainer);
(导出就是所谓的 WithAuth。)
其中一些代码是从使用 react-navigation 2.0 的应用程序中提取的,我已经更新到 3.0,我想我错过了现在需要的东西,但是,我找不到它。
任何帮助表示赞赏!
解决方案
createAppContainer
需要直接包装导航器组件。更新您的代码,它看起来像这样:
Amplify.configure(awsmobile);
const App = createDrawerNavigator({
FirstScreen: {
screen: props => <First rootNavigator={props.navigation} screenProps={{ ...props.screenProps }} />,
navigationOptions: {
drawerLabel: ' ',
},
},
}, { initialRouteName: 'FirstScreen' });
const AppContainer = createAppContainer(App);
export default WithAuth(AppContainer);
推荐阅读
- sql - 在公式中组合度量和维度 (Datastudio)
- angular - Angular 材质树中的对象数组
- reactjs - ThreeJS Gltf 已加载,但模型不可见(生产版本)
- sql - SQL。有限查询
- javascript - 获取excel列作为数组NodeJS
- javascript - 如何正确地从表单中获取数据并发送 GET 请求?
- javascript - 默认情况下关闭 javascript 时,chrom 开发工具功能会失败
- python - 用 unittest 测试类初始化方法
- python - 如何通过 gspread 获取前 300 行 Google 表格
- javascript - NestJs - mongoose - 动态集合命名