1

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

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

以及不起作用的 OneWay 代码。

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

1 回答 1

0

您的应用程序中有多个 StackNavigator。您正在尝试导航到位于不同堆栈中的屏幕。因此，您还应该传递堆栈的名称。假设您有一个要导出到 app.js 的主 StackNavigator，您将拥有如下内容：

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

然后，如果您在 Screen4 上并想要导航到 Screen1：

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

也不要忘记从 react-navigation 导入 NavigationActions。

于 2019-02-06T15:47:48.410 回答