不正确的导航本土反应

Question

我用的反应导航来处理我的应用程序导航。我有一个问题。我有5个导航文件。我有一个使用它的StackNavigator createMaterialTopTabNavigator。但我不能在它们之间的导航。

我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);

我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);

我的应用程序主导航：

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);

和单向的代码没有工作。

<TouchableOpacity
  style={styles.buttonText}
  onPress={()=>this.props.navigation.navigate('AirLineSearchResult')}
  >
    <View style={styles.buttonContainer}>
      <Text
        style={styles.okBotton}
        >جست و جو</Text>
    </View>
</TouchableOpacity>

Answer 1

你在你的应用不止一个StackNavigator。您正在试图导航到一个屏幕，它在不同的堆栈。因此，你应该也通过堆栈的名称。假设你有你导出到您的app.js主StackNavigator，你会有这样的事情：

-Main Navigator
  -ChildNavigator1
    -Screen1
    -Screen2
  -ChildNavigator2
    -Screen3
    -Screen4

然后，如果你是在Screen4并希望导航屏蔽1：

this.props.navigation.navigate('ChildNavigator1', {}, NavigationActions.navigate({ routeName: 'Screen1' }))

也不要忘了从导入反应导航NavigationActions。