React Native Navigation-在具有不同参数的同一屏幕上的路线之间移动

Question

我有一个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？

谢谢！

Answer 1

您是否尝试使用navigation.navigate代替navigation.push？因为push的作用是将页面显式地推送到新堆栈中，因此在按navigation.goBack（）时不会检索老年人id。因此，当您按下屏幕的backButton时（即返回时），您可以显式调用this.props.navigation.push（'Person'，{id：id}）。

您可以尝试使用Navigation.navigate，看看是否有帮助。

毫无疑问。疾病帮助：D

Answer 2

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

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

    }}

Answer 3

将此代码添加到组件类中

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

导航新用户页面时还要调用setState

this.setState({
visibility:false})