Question

我使用反应导航来处理我的应用导航。我有一个问题。我有5个导航文件。我有// Exceptions: // T:System.PlatformNotSupportedException: // .NET Core only: This member is not supported.在StackNavigator上使用它。但是我无法在它们之间导航。

我的createMaterialTopTabNavigator

createMaterialTopTabNavigator

和我的stackNavigator：

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

我在应用程序上的主要导航：

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

以及无法正常运行的OneWay代码。

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

Answer 1

您的应用程序中有多个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。

反应原生导航不正确

1 个答案: