typescript - React Native 导航 (4.x) Prop 在屏幕之间变为空

标签 typescript react-native react-navigation

我有一堆屏幕,用于创建将在最后显示的对象。
通过屏幕传递参数时,直到最后一个都没有问题。
当您在最后一个屏幕上确认导航到仪表板(列出所有对象)的功能触发时,它会去它需要去的地方,但在检索构造函数中的参数时,它们返回为 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/

相关文章:

javascript - 在类组件react-native中声明const

swift - 如何从 Firebase 获取特定数据

javascript - 迭代 TypeScript 中的接口(interface)属性

reactjs - TypeScript 和 createContext - 类型上缺少属性

typescript - 用 Jest 模拟/ stub Typescript 接口(interface)

javascript - 如何在 react-native 中以编程方式重新加载当前页面

javascript - 在未识别的 native react 中导入 ES 模块

javascript - React Navigation - 如何从另一个文件调用函数并在 headerRight onPress 上使用它?

react-native - React Navigation v3 Modal 不适用于 createBottomTabNavigator

reactjs - 键入针对滚动条的 React useRef