React Native Navigation - 在同一屏幕上使用不同参数的路线之间移动答案

【问题标题】：React Native Navigation - Moving between routes on same screen with different paramsReact Native Navigation - 在同一屏幕上使用不同参数的路线之间移动
【发布时间】：2019-12-02 10:41:41
【问题描述】：

我有显示人员资料的 React Native 应用程序（例如 Facebook）。我使用 React Navigation 在屏幕之间导航。

在个人页面上，您可以按另一个个人项目，它会导航到具有不同个人 ID 的同一个人页面。

这是我按下人员项目时的导航方式：

props.navigation.push('PersonPage', {personId: person.id})

它正在工作并导航到新屏幕，并且还正确获取数据（人员详细信息），但在页面呈现新数据之前，我收到此错误： JSON value '<null>' of type NSNull cannot be converted to NSNumber。当我点击关闭错误时，我可以看到完整的个人资料，一切都很好。但是当我返回 (props.navigation.goBack()) 时，它会移回上一页（人物页），但最后一个人的 id 丢失并且页面为空。

如何正确处理？为什么我会收到此错误？以及返回时如何保存前一个人的id？

谢谢！

【问题讨论】：

能否提供导致错误的代码部分。
我不知道是什么导致了这个错误。错误不明确，也不具体。我所知道的是，它发生在我使用不同的参数导航到同一个屏幕之后。无论如何，我更关心找到在这些屏幕之间导航的正确方法。谢谢！
您使用的是哪个状态管理工具？
我正在使用 Redux
是的，所以当页面在后台时你应该阻止屏幕更新新数据。在 shouldComponentUpdate 方法中做一些逻辑

标签： react-native react-navigation react-native-navigation

【解决方案1】：

由于您尚未提供代码，因此我添加了用于处理导航到带有参数的屏幕的步骤。如果您发现任何困难，请您尝试一下并告诉我

    constructor(props) {
    super(props);
    this.state = {
      personId: 0,
      data: [],
    };
    } 



    componentDidMount() {
    this.setState({ personId: this.props.navigation.state.params.personId })
    this._getPageData()

    }



    static getDerivedStateFromProps(nextProps, prevState) {
    // For differnt personid, ie if props changes
    if (nextProps.navigation.state.params.personId !== prevState.personId) {
      return {
        personId: nextProps.navigation.state.params.personId
      }
    }
    return null;
    }




    componentDidUpdate(prevProps, prevState) {
    if (this.props.navigation.state.params.personId !== prevProps.navigation.state.params.personId) {
      this._getPageData();// Fetch data again if props changes
    }
    }



    _getPageData(){

    // Console.log(this.state.personId) and see if correct value is showing
    // fetch data based on  this.state.personId

    }

如下添加你的导航键

    onPress{() => {

        const navigateAction = NavigationActions.navigate({
        routeName: 'YourRoute',
        params: { personId: YOURPERSONID },
        });
        this.props.navigation.dispatch(navigateAction);

    }}

【讨论】：

【解决方案2】：

您是否尝试过使用 navigation.navigate 代替 navigation.push ？因为 push 所做的是将页面显式推送到新堆栈中，因此在按下 navigation.goBack() 时它不会检索旧人员 ID。因此，当您按下屏幕的后退按钮时，即返回时，您可以显式调用 this.props.navigation.push('Person',{id:id}) 。

您可以尝试使用 navigation.navigate 看看是否有帮助

请随时提出疑问。帮不上忙:D

【讨论】：

感谢您的回答！我试过了-props.navigation.navigate({ routeName: 'PersonPage', params: {personId: person.id}, key: 'PersonPage' + (Math.random () * 10000) });。它对我的作用相同..

【解决方案3】：

将此代码添加到您的组件类中

 state = {
    viewVisibility: true,
  };
  shouldComponentUpdate() {
    if (this.state.viewVisibility) return true;
    return false;
  }

导航新用户页面时也调用 setState

this.setState({
visibility:false})

【讨论】：