React Navigation(V3):How to set navigation function in custom router file? - react-native

Question

I have a Router.js to set all of my components with react-navigation.
When I click the component FloorScreen headerRight button will show click alert.
Now I want to change it like this.props.navigation.navigate.goBack();
Router.js:
import React, { Component } from 'react';
import { Image, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
// and import some screen...
const Router = createStackNavigator({
WelcomeScreen: {
screen: WelcomeScreen,
navigationOptions: () => ({
header: null
}),
},
HomeScreen: {
screen: HomeScreen
},
FloorScreen: {
screen: FloorScreen,
navigationOptions: {
drawerLabel: 'test',
headerStyle: {
backgroundColor: commonColor.appBackgroundColor,
},
headerRight: (
<TouchableOpacity onPress={() => alert('click')}>
<Image style={{ width: 20, height: 20}} source={BackIcon} />
</TouchableOpacity>
)
}
}
},
{
initialRouteName: 'WelcomeScreen',
headerMode: 'screen'
});
export default createAppContainer(Router);
I know I can set the code in FloorScreen.js to achieve it:
static navigationOptions = ({ navigation }) => ({
headerRight : (
<TouchableOpacity onPress={() => { navigation.goBack() }}>
<Image />
</TouchableOpacity>
),
});
Is possible to set the code in my Router.js ? Or set the code in FloorScreen.js is the only way to do it ?
Any help would be appreciated.

Answer 1

You can implement it at navigationOption
navigationOptions: () => ({
tabBarLabel: strings.labelJobs,
tabBarIcon: ({ tintColor }) => (
<Icon type="FontAwesome" name="someName" />
),
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.index > 0) {
navigation.dispatch(StackActions.popToTop());
}
defaultHandler();
}
})
The above is to demonstrate how to display first screen of stack, just to show you how you can access navigation within navigationOptions