incorrect navigation in react native - reactjs

Question

I use react navigation to handle my app navigate. I have one problem. I have 5 navigation file. I have createMaterialTopTabNavigator that use it on StackNavigator. but I cant navigation between them.
my createMaterialTopTabNavigator
import React, { Component } from 'react';
import {
StyleSheet,
View,
Dimensions,
} from 'react-native';
import { createMaterialTopTabNavigator ,createAppContainer} from 'react-navigation';
import OneWay from '../Components/MainSearch/OneWay' ;
import TwoWay from '../Components/MainSearch/TwoWay';
import SeveralWay from '../Components/MainSearch/SeveralWay';
const FlightOptions = createMaterialTopTabNavigator({
'چندمقصده':{
screen: SeveralWay,
navigationOptions:{
header: null, headerMode: 'none',swipeEnabled:true}
},
'یک طرفه':{
screen: OneWay,
navigationOptions:{
header: null, headerMode: 'none',swipeEnabled:true}
},
'رفت و برگشت':{
screen: TwoWay,
navigationOptions:{
header: null, headerMode: 'none',swipeEnabled:true}
}
},
{
tabBarOptions: {
labelStyle: {
fontSize: 15,
color: '#15479F',
fontFamily : 'Sahel-Bold',
textDecorationLine: 'underline',
},
style: {
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
elevation: 0,
backgroundColor: '#fff',
},
tabStyle:{
},
indicatorStyle :{
opacity: 0
}
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
export default createAppContainer(FlightOptions);
and my stackNavigator:
import React, { Component } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import { createStackNavigator ,createAppContainer} from 'react-navigation';
import Calendar from '../Components/MainSearch/Calendar';
import AirLineSearchResult from '../Components/MainSearch/AirLineSearchResult';
import OneWay from '../Components/MainSearch/OneWay' ;
import TwoWay from '../Components/MainSearch/TwoWay';
import SeveralWay from '../Components/MainSearch/SeveralWay';
const Detail = createStackNavigator(
{
OneWay:{
screen : OneWay,
navigationOptions: {
header: null, headerMode: 'none'
}
},
TwoWay:{
screen : TwoWay,
navigationOptions: {
header: null, headerMode: 'none'
}
},
SeveralWay:{
screen : SeveralWay,
navigationOptions: {
header: null, headerMode: 'none'
}
},
Calendar:{
screen : Calendar,
navigationOptions: {
header: null, headerMode: 'none'
}
},
AirLineSearchResult:{
screen : AirLineSearchResult,
navigationOptions: {
header: null, headerMode: 'none'
}
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
export default createAppContainer(Detail);
my main navigation on app:
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Splash from '../Components/Splash';
import WalkThrough from '../Components/WalkThrough';
import Login from '../Components/Login/Login';
import Validation from '../Components/Login/Validation';
import MainSearchNavigation from './MainSearchNavigation';
import OneWay from '../Components/MainSearch/OneWay';
import AirLineNavigation from './AirLineNavigation';
import HotelSearchNavigation from './HotelSearchNavigation';
const AppNavigator = createStackNavigator(
{
Splash: Splash,
WalkThrough: WalkThrough,
Login : Login,
Validation : Validation,
OneWay : OneWay,
MainSearchNavigation :{
screen : MainSearchNavigation,
navigationOptions: {
header: null, headerMode: 'none'
}
},
AirLineNavigation:{
screen :AirLineNavigation,
navigationOptions: {
header: null, headerMode: 'none'
}
},
HotelSearchNavigation:{
screen :HotelSearchNavigation,
navigationOptions: {
header: null, headerMode: 'none'
}
},
},
{
initialRouteName: "Splash"
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
export default createAppContainer(AppNavigator);
and the code of OneWay that didnt work.
<TouchableOpacity
style={styles.buttonText}
onPress={()=>this.props.navigation.navigate('AirLineSearchResult')}
>
<View style={styles.buttonContainer}>
<Text
style={styles.okBotton}
>جست و جو</Text>
</View>
</TouchableOpacity>

Answer 1

You have more than one StackNavigator in your app. You are trying to navigate to a screen that it's in a different Stack. Therefore you should pass also the name of the stack. Assuming that you have a main StackNavigator that you are exporting to your app.js, your would have something like this:
-Main Navigator
-ChildNavigator1
-Screen1
-Screen2
-ChildNavigator2
-Screen3
-Screen4
Then, if you are on Screen4 and want to navigate to Screen1:
this.props.navigation.navigate('ChildNavigator1', {}, NavigationActions.navigate({ routeName: 'Screen1' }))
Also dont forget to import NavigationActions from react-navigation.