Вызовите состояние внутри NavigationOptions React native

Question

Я пытаюсь изменить значение состояния внутри navigationOptions.

мои параметры навигации

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
   // alert(params.searchText);
    return {
      headerLeft: (params.searchText) ? <View
        style={{
          flexDirection:
            'row', justifyContent: 'center'
        }}>
        <TouchableOpacity
          onPress={()=> {
            // navigation.navigate('home');
            alert('Coming soon ');
          }}>
          <Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
            source={require('../assets/header_icons/three_logo.png')}
          />
        </TouchableOpacity>
      </View> :
        <View style={{
          flexDirection:
            'row', justifyContent:
            'center'
        }}>
          <TouchableOpacity
            onPress={()=> {

            this.setState({
             loadUrl: "card.html#!/customer-dashboard?userType=Authenticated",
            showWeb:true,

           });

            }}>

            <Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
              source={require('../assets/header_icons/icon_arrow_left.png')}
            />

          </TouchableOpacity>
        </View>,
    }
  }

Это выбрасывает this.setState is not an function

Пожалуйста, дайте мне знать, какдостичь этого.Как мы можем изменить значение состояния со статического navigationOptions

Answer 1

Что вам нужно сделать, это использовать setParams и getParams.

Поскольку navigationOptions является статическим, вы не можете использовать this.setState, поэтому вам нужно установить параметр в вашем приложении и получить его в заголовке или наоборот.

В вашем компоненте у вас будет componentDidMount что-то вроде

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

А в static navigationOptions у вас будет что-то вроде

const someThing = this.props.navigation.getParam('someThing')

А теперь у вас в navigationOptions, someThing будет somethingFromYourComponent.

Таким образом, вы можете пропустить что угодно. Функции, компоненты, объекты ...

В вашем случае somethingFromYourComponent может быть функцией, которая обновляет состояние, а в заголовке вы можете изменить ее на onPress={() => someThing()}

Это объясняется в документах

И вы также должны заметить, что

React Navigation не гарантирует, что ваш экранный компонент будет смонтирован перед заголовком. Поскольку параметр extensionCount задается в componentDidMount, он может быть недоступен для нас в navigationOptions. Обычно это не будет проблемой, потому что компоненты onPress for Button и Touchable ничего не сделают, если обратный вызов равен нулю. Если у вас здесь есть свой собственный компонент, вы должны убедиться, что он работает так, как ожидается, с нулем для его свойства обработчика прессы.

Вот пример из документов, где они делают setState с кнопки в заголовке (так же, как вы хотите сделать)

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
    };
  };

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

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}