Как передать значение this.state в пользовательских навигационных параметрах в React-Native

Question

Я новичок в React-Native и пытаюсь выяснить с помощью React-Native Navigation, как передавать значения в мой пользовательский заголовок

Вот как выглядит мой Компонент А с CustomHeader

constructor(props) {
    super(props);       
    this.state = {
      sortId: 4
    }
 }

componentDidMount() {
    this.props.navigation.setParams({
      sortId: this.state.sortId
    })
}

static navigationOptions = {
    header: props =>    // Your custom header
      <CustomHeader
         sortId={props.navigation.params.sortId}
      />
};

В моем компоненте CustomHeader, когда я пытаюсь показать значение, как это

export default class CustomHeader extends Component {

  constructor(props) {
   super(props);
  }

 componentWillMount() {
   Alert.alert(this.props.sortId.toString());
 }

Это не работает, и я получаю ошибку: undefined is not an object (evaluating 'this.props.sortId')

Но когда я жестко кодирую значение, как показано ниже, оно работает

static navigationOptions = {
    header: props =>    // Your custom header
      <CustomHeader
         sortId={4} //this works
      />
};

Любая идея, как я могу передать параметры? Что мне не хватает? Я не понимаю, как добавить параметры в props и получить к ним доступ в NavigationOptions.

Answer 1

Если вам нужно получить доступ к params из navigationOptions, то вам нужно изменить свой код как

    static navigationOptions = {
    header: props =>    // Your custom header
      <CustomHeader
         sortId={props.navigation.state.params.sortId} //... state is missing
      />
};

как упомянуто здесь