Question

我有一个使用React Navigation的React Native应用程序。在这个应用程序中，我有一个带有几个选项卡的TabNavigatator，其中两个选项卡与搜索栏共享一个自定义标题组件。

以下是标签类的相关摘要：

export default class ScreenOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filter: ''};
  }

  componentDidMount() {
    this.props.navigation.setParams({filterOne: this.filter});
  }

  static navigationOptions = ({navigation}) => {
    const { params = {} } = navigation.state;
    return {
      header: (<MainHeader filterOne={params.filterOne} />)
    };
  }

  filter = (q) => {
    // . . .
  }

  . . .
}

另一个标签基本相同：

export default class ScreenTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filter: ''};
  }

  componentDidMount() {
    this.props.navigation.setParams({filterTwo: this.filter}); //line A
  }

  static navigationOptions = ({navigation}) => {
    const { params = {} } = navigation.state;
    return {
      header: (<MainHeader filterOne={params.filterOne} />)
    };
  }

  filter = (q) => {
    // . . .
  }

  . . .
}

标题本身：

export default class MainHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  filter = (q) => {
    this.setState({text: q});
    // this.props.filter(q);
                // previously the passed filter props shared a name,
                // but that didn't work
    if (this.props.filterOne) {
      this.props.filterOne(q);
    }
    if (this.props.filterTwo) {
      this.props.filterTwo(q);
    }
  }

  . . .
}

搜索中的文字仍然位于标签之间，因此我认为标题不会被重新创建。

如果我注释掉“A行”，我会得到ScreenOne的过滤器功能，但是在线路到位的情况下，只有ScreenTwo的过滤器工作，而One的错误是未定义的。

我对此有错误吗？我尝试将MainHeader拆分为HeaderOne和HeaderTwo，但第二个setParams仍在删除第一个过滤器声明。我错过了什么吗？

在React Navigation标签

0 个答案: