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

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

0 голосов
/ 26 апреля 2018

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

Вот как выглядит мой компонент A с 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.

1 Ответ

0 голосов
/ 26 апреля 2018

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

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

как уже упоминалось здесь

...