React Navigation: ¿cómo llamar a la función desde otro archivo y usarl

React Navigation: ¿cómo llamar a la función desde otro archivo y usarla en headerRight onPress?

Me pregunto si hay una manera de usar headerRight onPress para hacer algo como llamar a Alert:

Tengo una función dentro de MyPet.js con el código:

_alert=()=>{
  alert('saving')
}

y en router.js tengo una lista de todas las pantallas que he usado para navegar con un código como:

export const MyPatientStack =  StackNavigator({
  MyPatient: {
    screen: MyPatient,
    navigationOptions: {
      tabBarLabel: 'My Patient',
      tabBarIcon: ({ tintColor, focused }) => <FontAwesome name="wheelchair" size={25} color={tintColor} />,
      headerTitle: 'My Patient',
      headerStyle: {
        backgroundColor: '#8B0000',
      },
      headerLeft: <HeaderBackButton tintColor="#FFF" onPress={() => navigation.goBack()} />,
// and here I want to call the function of _alert() from MyPet.js
      headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={_alert()}/>,      
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        textAlign:'center',
        flex:1
      },
    }
  }
})

Lo probé y el código no encuentra la variable _alert

¿Cómo puedo hacer eso?

cualquier comentario es bienvenido

Mostrar la mejor respuesta

Dado que su componente de navegación no tiene ninguna referencia a lo que hay en su componente Pet.js, puede intentarlo de la siguiente manera

Use navigationOptions en su componente Pet.js como

// Inside the class
// Since navigationOptions have no access to this parameter of the class, therefore you need to pass them as params
static navigationOptions = ({navigation}) => {
        const {params}} = navigation.state;
        return {
            headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={() => params.showAlert()}/> />

        };
    };


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

alertShower = () =>  Alert.alert('Success', 'Hello')

¿Significa que necesito eliminar el navigationOptions en router.js?

Sí, si este config es específico para su Pet.js component, puede agregar el rest of the configuration aquí

Aquí está la jerarquía para el navigationOptions , RouteConfigs > Screen Property > StaticNagivatorConfig