Reaccionar a la navegación: ¿cómo usar this.state en las opciones de n

Reaccionar a la navegación: ¿cómo usar this.state en las opciones de navegación del encabezado?

Pasé un par de horas para encontrar un código para manejar el estado en navigationOptions, pero no lo entiendo hasta ahora,

Tengo un código:

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    return {
      headerLeft: <FontAwesome name='arrow-left' size={20} color="#FFF" onPress={() => navigation.navigate('Home')} style={{margin: DeviceWidth*0.04}}/>,
      // here I want to show the TextInput if the `HeaderRight pressed` and show the `String` for the first time
      headerTitle: this.state.showSearch ? <TextInput
        placeholder="this is placeholder"
        placeholder="search"
        underlineColorAndroid='transparent'
        placeholderTextColor= 'gray'
        minWidth={DeviceWidth*0.75}
        style={{borderWidth:1, borderColor:'grey', backgroundColor:'white', borderRadius:50}}
      /> : 'My Patient',
      // Here I want to set the state of `showSearch` to visible at `onPress`
      headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={() => params.handleRemove()} style={{margin: DeviceWidth*0.04}}/>,
    }
  }

  componentDidMount () {
    this.props.navigation.setParams({ handleRemove: this.removeVehicle })
  }

  removeVehicle = () => {
    this.setState({showSearch: !this.state.showSearch})
  }
  constructor(props){
    super(props); 
    this.state = {showSearch: false}
  }

cuando ejecuto el código, tengo un error

TypeError: undefined no es un objeto (evaluando '_this3.state.showSearch')

¿Es posible mostrar/ocultar el título del encabezado dependiendo de this.state.showSearch?

Mostrar la mejor respuesta

Puedes hacer esto de la siguiente manera fácil

 static navigationOptions =  ({ navigation }) => {
        const { params = {} } = navigation.state
       return {
            headerTitle: params.showSearch ? 'New Title' : 'Alternate Title'
            // Similarly for the rest
       }  
    }

changeTitle = () => {
   const {showSearch} = this.state
        // Assuming you have access to the navigation props
        this.props.navigation.setParams({
            showSearch
        })
   this.setState({showSearch: !showSearch})
 }

No consigo manejar el onPress en headerRight, ¿puedes hacerlo más claro?

oh, ahora lo tengo, pero necesito presionarlo dos veces para que cambie, ¿por qué puede ser así?

Puedes agregar tu código, echaré un vistazo a lo que has hecho