Question

我有一个react组件类，该类通过static navigationOptions函数声明了一个自定义的react-navigation标头，该函数会自动调用react-navigation。问题是，我想基于传递给组件的道具有条件地渲染标头，而不是简单地将传递为路线参数的道具作为条件。我不能简单地将它们设置在componentDidMount上，因为我引用的道具在安装了组件之后会发生变化，因此我需要将它们滴入标题中。

我想出了一种方法，以为我会在这里发布。

Answer 1

首先，一个辅助方法。这样做的目的只是确保在将道具传递给componentDidUpdate内部的navigation.params时不会进入无限循环，并封装实际映射道具所涉及的逻辑上的麻烦。这使用JSON.stringify来比较道具。根据您的操作，您可能需要用更复杂的比较来代替该位。

export function mapPropsToNavigationRouteParams(
  props,
  prevProps,
  getPropsToMap,
) {
  if (!props) return;
  const propsToMap = getPropsToMap(props);

  if (
    !prevProps ||
    JSON.stringify(getPropsToMap(prevProps)) !== JSON.stringify(propsToMap)
  ) {
    props.navigation.setParams(getPropsToMap(props));
  }
}

然后，在采用上述方法的组件中，我们可以执行以下操作……

const getPropsToMapToNavigation = props => ({
  myComponentProp: props.myComponentProp,
});

class MyComponent extends React.Component {
  componentDidMount() {
    mapPropsToNavigationRouteParams(
      this.props,
      null,
      getPropsToMapToNavigation,
    );
  }

  componentDidUpdate(prevProps) {
    mapPropsToNavigationRouteParams(
      this.props,
      prevProps,
      getPropsToMapToNavigation,
    );
  }

  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    const myComponentProp = params ? params.myComponentProp : null;
    // ...
  }

鉴于react-router的局限性，这是我能想到的最好的方法。如果您有更好的解决方案，请告诉我！

如何将组件道具传递给反应导航的静态navigationOptions函数

1 个答案: