Как передать функцию компонента в компонент внутри навигационных параметров

Question

, так что я уже несколько дней имею дело с этой проблемой, много гуглю и пытаюсь найти решение.Большинство решений предлагают использовать this.props.navigation.setParams({function: this.function.bind(this)) внутри componentDidMount, а затем делать что-то подобное в navigationOptions ->

static navigationOptions = {
header:  ({navigation})  => 
   <Button onPress = { () => navigation.state.params.function}/> }

Это работает для кнопок с onPress, но этот метод не работает, когда он просто«реквизит» для пользовательского компонента.

Это мой код

static navigationOptions = {
header:  ({navigation})  => 
   <CustomCar refreshCar = {navigation.state.params.refreshCarSearch}
   />

transitionConfig: () => ({
  transitionSpec: {
    duration: 0,
    timing: Animated.timing,
    easing: Easing.step0,
  },
}),
};

constructor(props) {
    super(props)
    this.state =  {
      Car: ' '
    }
    this.refreshCarSearch = this.refreshCarSearch.bind(this);
}

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

refreshCarSearch(e){
    this.setState({
        Car: e
        });
                }

Я всегда получаю, что navigation.state.params.refreshCarSearch не определен.Я перепробовал много вариантов этого метода, но безрезультатно.Этот метод работает, только если я заменяю компонент кнопкой onPress, но мне нужно пропустить эту функцию.По сути, мне нужно, чтобы мой компонент CustomCar (который должен находиться в верхней части экрана, поэтому в navigationOptions) передавал значение обратно этому компоненту, чтобы можно было выполнить refreshCarSearch.Единственный способ, которым я читал, это сделать с помощью Redux или в этом случае, когда родительский компонент передает функцию refreshCarSearch в дочерний компонент.Компонент, существующий в navigationOptions, делает его намного более сложным, возможно ли это?

Answer 1

Рассмотрим родительский компонент, вы отправляете функцию с именем refreshCarSearch для реквизита, которая не работает в вашем случае.

<ParentComponent refreshCarSearch={this.refreshCarSearch}/>

Итак, вам нужно отправить refreshCarSearch следующим образом

<ParentComponent screenProps={{refreshCarSearch:this.refreshCarSearch}}/>

В навигацииВ вариантах вашего дочернего компонента вы можете получить к нему доступ следующим образом

static navigationOptions = ({navigation, screenProps}) {
header:  ()  => 
   <Button onPress = { () => screenProps && screenProps.refreshCarSearch}/> 
}

Еще одинЯ не уверен, что params в заголовке возвращает объект навигации, но предыдущий возвращает объект navigation и screenProps (параметры статического метода navigationOptions).

Надеюсь, это поможет вам.

Answer 2

Если вы хотите, чтобы этот клиентский автомобильный компонент находился вверху экрана, вам следует вызвать этот компонент вверху в функции рендеринга, а затем вы получите свой refreshCarSarch this.props.navigation.state.params.refreshCarSearch, например:

render(){
 return (
   <CustomCar refreshCar = {()=>this.props.navigation.state.params.refreshCarSearch()}
   />
)
}