Question

这是我的第一篇文章，对于任何错误，我们深表歉意。

我正在尝试制作一系列嵌套的导航器，从Switch导航器开始，然后进入Drawer Navigator，对于每个部分，它调用一个不同的Stack Navigator，如下所示：

SwitchNavigator
- DrawerNavigator
  - MapStackNavigator
    - 地图屏幕
  - ProfileStackNavigator
    - 个人资料屏幕

“抽屉导航”的初始路径是“堆栈导航”，它称为“地图屏幕”。问题是，如果我转到抽屉导航的“配置文件”部分，该部分需要打开“配置文件屏幕”的Stack Nav，我就无法通过内部的onPress（）方法返回到“地图屏幕”。导航标题左图标。

react-native应用程序仅针对iOS开发，现在由于我没有要测试的iOS设备，也没有Mac可以使用模拟器，因此我目前正在android智能手机上对其进行测试。

如我所测试的，如果该应用程序旨在在android上运行，这不会有问题，因为android具有内置的“后退”按钮，并且它会自动返回到上一个屏幕（设置为DrawerNav中的“地图”屏幕）。但是，仅在iOS中，我们实际上需要在屏幕顶部（因此，在StackNav标题内）显示一个“后退”按钮，以返回到地图屏幕。

我的第一个猜测是使用onPress（）内的navigation.navigate从当前配置文件StackNav调用另一个屏幕，该屏幕调用我创建的第一个SwitchNav来加载内容，但不会工作，因为它就像一个“导航循环”，并且不能从Profile StackNav调用常量SwitchNavigator。
我尝试从onPress（）调用保存MapScreen的StackNav，因此：单击后退按钮>它调用onPress（），后者调用另一个屏幕>另一个屏幕调用StackNav MapScreen，但将一个StackNav嵌套在另一个之中。

我的Routes.js看起来像这样：

import Testemapa from './src/components/Map/index';
import MyProfile from './src/components/DrawerNavigator/MyProfile';
import Icon from 'react-native-vector-icons/Ionicons';
import IconE from 'react-native-vector-icons/Entypo';


// The StackNav that holds the Map Screen
const IvesStackNavigator = createStackNavigator ({
  screenMap: Testemapa,
},
{
  defaultNavigationOptions: ({navigation})=>{
    return{
      headerRight: (<Icon 
        style={{paddingRight: 10}} 
        onPress={() => navigation.openDrawer()}
        name="md-menu" size={30} 
      />)
    };
  }
});


// What I tried to do to call the MapScreen, but it ends up nesting it inside
const wayBackSwitchNavigator = createSwitchNavigator ({
  transitionToHome: IvesStackNavigator,
});


// The StackNav that holds the Profile Screen
const myProfileStackNavigator = createStackNavigator ({
  drawer_myProfile: MyProfile,
  transitionPathHome: wayBackSwitchNavigator,
},
{
  headerBackTitleVisible: 'true',
  defaultNavigationOptions: ({navigation})=>{
    return{

      //This guy is the Back button, that's actually an Icon
      headerLeft: (<IconE 
        style={{paddingLeft: 10}} 
        onPress={() => navigation.navigate('transitionPathHome')}
        name="chevron-small-left" size={30} 
      />),
    };
  },
});


// The Drawer which calls all of the stacks
const MainDrawerNavigator = createDrawerNavigator  ({
  BOOK_A_RIDE: { 
    screen: IvesStackNavigator,
      navigationOptions: () => 
          ({
              title: 'BOOK A RIDE'
          }) 
  },
  MY_EARNINGS: { 
    screen: ridesStackNavigator,
      navigationOptions: () => 
          ({
              title: 'MY EARNINGS'
          }) 
  },
  MY_PROFILE: { 
    screen: myProfileStackNavigator,
      navigationOptions: () => 
          ({
              title: 'MY PROFILE'
          }) 
  },
},
{
  initialRouteName: 'BOOK_A_RIDE',
  drawerOpenRoute:'DrawerOpen',
  drawerPosition: 'right',
  drawerBackgroundColor: 'black',
  hideStatusBar: 'true',
  overlayColor: 'red',
  edgeWidth: 100,
  contentOptions: {
    inactiveBackgroundColor: 'black',
    inactiveTintColor: '#fff',
    activeBackgroundColor: '#4d4d4d',
    activeTintColor: '#fff',
  },
  contentComponent: props =>
    <Container style={{alignItems: 'stretch', marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
      <Header style={{height:150, marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
        <Body style={{marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
          <ImageBackground source={require('./src/assets/splash_ImageLimo.jpg')} style={{left: -10, width: 264, height:150, opacity:0.7, marginLeft: 0, marginRight : 0, paddingRight: 0}}>

          </ImageBackground>
        </Body>
      </Header>
      <Content>
        <DrawerItems {...props} />
      </Content>
    </Container>
},
);


// The SwitchNav that is the first Navigator to run on the app
const firstSwitchNavigator = createSwitchNavigator(
  {
    TestDrawer: MainDrawerNavigator,
  },
  {
    initialRouteName: 'TestDrawer',
  }
);



export default createAppContainer(MySwitchNavigator);

因此，当按下MyProfileStackNavigator中的“后退”按钮时，应该返回到由MainDrawerNavigator内部的IvesStackNavigator持有的MapScreen。

不允许用户从“配置文件”屏幕中打开DrawerNav，因此后退按钮非常重要，因为这是返回地图的唯一方法。
如果我尝试通过将它们中的任何一个用作MyProfileStackNavigator中的Screen路径来直接调用SwitchNav或DrawerNav，则会收到错误消息，即被调用的屏幕不是React组件（“路线'transitionToHome'必须是React组件...“）。
如果我将其更改为直接调用IvesStackNavigator，则导航器最终将嵌套在MyProfileStackNavigator中。
并且，如果我调用实际的地图页面，它将在MyProfileStackNavigator中显示该地图页面，具有所有MyProfileStackNavigator属性（如“后退”按钮和缺少抽屉式菜单的按钮）。

任何对此的帮助将不胜感激，我对React-Native还是它的依赖项还很陌生，在学习之前，我不得不跳进编码领域，因为这是我上司分配给我的任务，所以我在制作应用时尝试学习。

如何实现“ goBack”功能以返回到初始导航器？

0 个答案: