我有一堆屏幕,用于创建将在最后显示的对象。
通过屏幕传递参数时,直到最后一个都没有问题。
当您在最后一个屏幕上确认导航到仪表板(列出所有对象)的功能触发时,它会去它需要去的地方,但在检索构造函数中的参数时,它们返回为 null
,即使通过调试器我也可以清楚地看到该 Prop 已成功传递给导航功能。
下面的一段代码调用了 api
从后端检索当前 user
, 如果成功了 openDashboardHouses
函数被触发:
new UsersApi(context).apiUsersCurrentMeGet().then(resp => {
console.log(resp);
// passing context - user - house object
openDashboardHouses(context, resp, context.state.house);
}).catch(error => {
console.log(JSON.stringify(error))
AlertHelper.showSimpleErrorAlert();
});
openDashboardHouses
函数只是要导航的单行代码:export function openDashboardHouses(context: Component<NavigationProps, any>, user: User, house: House = null) {
context.props.navigation.navigate(dashboardHousesRoute, {user: user, house: house}); // During debugging the values on this line are correctly filled
}
然后在下一个屏幕上,它应该在构造函数中获取 Prop 并将它们保存在状态中:constructor(props) {
super(props);
setHeaderTitleLocalized(props, 'screens.dashboard.title');
this.state = {
loading: false,
user: getUserFromNavigationProps(this),
houses: [],
resources: [],
created_house: getHouseFromNavigationProps(this),
};
}
如您所见,我有两个辅助函数,它们都没有返回任何内容export function getUserFromNavigationProps(context: Component<NavigationProps, any>) {
return context.props.navigation.getParam(USER_KEY); // USER_KEY = 'user'
}
export function getHouseFromNavigationProps(context: Component<NavigationProps, any>): House {
return context.props.navigation.getParam(HOUSE_KEY); // HOUSE_KEY = 'house'
}
知道发生了什么吗?附加信息:该房屋 Prop 是在第一个屏幕中创建的,并且在所有屏幕中都以相同的方式传递。只是最后一个不想合作
依赖项:
react 原生:
├─ react-native@0.62.2
│ ├─ @sentry/react-native@^1.0.0
react 导航:├─ @react-navigation/core@3.5.0
├─ @react-navigation/native@3.6.2
├─ @react-navigation/web@1.0.0-alpha.9
├─ react-navigation-drawer@1.4.0
├─ react-navigation-stack@1.5.3
├─ react-navigation-tabs@1.2.0
├─ react-navigation@3.12.1
│ ├─ @react-navigation/core@~3.5.0
│ ├─ @react-navigation/native@~3.6.1
│ ├─ react-navigation-drawer@~1.4.0
│ ├─ react-navigation-stack@~1.5.0
│ └─ react-navigation-tabs@~1.2.0
最佳答案
我找到了一个“解决方案”,显然构造函数(出于某种原因只有这个)损坏了或者无法赋值。
根据4.x docs你可以得到所有的导航 Prop
this.props.navigation.state.params
因此,与其尝试将其设置为状态,不如将其用作需要它的对象。例如
console.log(this.props.navigation.state.params.house);
打印正确的东西。注意我不能,因为我的项目已经太大了,但是当您有机会时,请始终将依赖项更新到最新版本以避免此类错误
关于typescript - React Native 导航 (4.x) Prop 在屏幕之间变为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69991134/