React Native中如何在函数内使用React Navigation传递的参数？

我明白你的困扰——每次进入页面都要点击按钮加载参数确实很影响用户体验。咱们来一步步解决这个问题：

问题根源 #

你在render()里定义的params是该函数的局部变量，所以组件的其他成员函数根本访问不到它。而直接写this.props.navigation.state.userID返回null，大概率是因为组件刚挂载时，导航状态还没完全初始化完成，此时params可能还没被传递过来。

方案一：组件挂载时自动将参数存入状态（推荐） #

我们可以利用React的生命周期函数componentDidMount，在组件加载完成后自动获取参数并存入状态，不需要用户手动点击按钮：

class Comments extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      passKey: '',
      passUserID: '',
      passContent: '',
      firebaseItems: '',
      fontLoaded: false
    };
  }

  componentDidMount() {
    // 从导航状态中获取参数
    const { params } = this.props.navigation.state;
    // 先判断参数是否存在，避免报错
    if (params) {
      this.setState({
        passKey: params.postKey,
        passUserID: params.userID,
        passContent: params.postContent,
        fontLoaded: true
      });
    }
  }

  // 示例：在自定义函数中使用状态里的参数
  someNestedFunction() {
    // 直接从state中取，不用再操心参数的问题
    console.log('用户ID:', this.state.passUserID);
    console.log('帖子Key:', this.state.passKey);
  }

  render() { 
    // 渲染时也可以直接用state里的值，或者继续用params做兜底
    const { params } = this.props.navigation.state; 
    return ( 
      <>
        <Text>{this.state.passContent || (params && params.postContent)}</Text>
        {/* 调用自定义函数 */}
        <Button onPress={() => this.someNestedFunction()} title="测试函数" />
      </>
    )
  }
}

方案二：在函数内直接获取参数 #

如果你不想把参数存入状态，也可以在需要使用参数的函数里直接从this.props.navigation.state中读取，但记得一定要先判断参数是否存在，避免出现“找不到变量”或null报错：

class Comments extends React.Component { 
  someNestedFunction() {
    const { params } = this.props.navigation.state;
    // 先判断params是否存在，再使用里面的属性
    if (params) {
      console.log('用户ID:', params.userID);
      console.log('帖子内容:', params.postContent);
    } else {
      console.log('参数尚未加载完成');
    }
  }

  render() { 
    const { params } = this.props.navigation.state; 
    return ( 
      <>
        <Text>{params && params.postContent}</Text>
        <Button onPress={() => this.someNestedFunction()} title="测试函数" />
      </>
    )
  }
}

额外优化：监听参数变化 #

如果你的场景中，参数可能在组件挂载后发生变化（比如从其他页面返回时参数更新），可以用componentDidUpdate生命周期监听导航参数的变化，自动更新状态：

componentDidUpdate(prevProps) {
  // 对比前后导航参数是否变化
  if (prevProps.navigation.state.params !== this.props.navigation.state.params) {
    const newParams = this.props.navigation.state.params;
    if (newParams) {
      this.setState({
        passKey: newParams.postKey,
        passUserID: newParams.userID,
        passContent: newParams.postContent
      });
    }
  }
}

这样不管参数是初次传递还是后续更新，你的组件都能自动获取到最新值，完全不需要用户手动操作~

内容的提问来源于stack exchange，提问作者user8749566