如何强制 stackNavigator 以 MainScreen 为目标？

Question

我在第一个选项 StackNavigator 中的 DrawerNavigator 中实现了 StackNavigator 和 DrawerNavigator。问题是，当我浏览 Stack 屏幕时，我想通过 Drawer 返回主屏幕，但这并没有发生，因为 Stack 存储了用户上次打开的屏幕。

我试过使用一些 Navigation Prop 但我不确定在哪里插入这段代码，甚至不知道在堆栈上使用哪个命令。

MenuDrawer.js

import React from 'react';
import {
    View,
    ScrollView,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    Dimensions
} from 'react-native';

export default class MenuDrawer extends React.Component{
    navLink(nav, text) {
        return(
            <TouchableOpacity style={{height: 50}} onPress={() => this.props.navigation.navigate(nav)}>
                <Text style={styles.link}>{text}</Text>
            </TouchableOpacity>
        )
    }

    render() {
        return(
            <ScrollView styles={styles.continer}>
                <View style={styles.topImage}>
                    <Image style={styles.image} source={require('../images/informationappscreen/act.png')} />
                </View>

                <View style={styles.bottomLinks}>
                    {this.navLink('Principal', 'Principal')}
                    {this.navLink('Sobre o Aplicativo', 'Sobre o Aplicativo')}
                    {this.navLink('Sobre os Responsáveis', 'Sobre os Responsáveis')}
                    {this.navLink('Sobre o Projeto', 'Sobre o Projeto')}
                    {this.navLink('Política e Termos', 'Política e Termos')}
                </View>

                <View style={styles.footer}>
                    <Text style={styles.description}>ACT</Text>
                    <Text style={styles.version}>v1.3.0</Text>
                </View>
            </ScrollView>
        );
    }
}

App.js

import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...

const HomeNavigator = createStackNavigator ({
  'Main1': {
    screen: Main1,
    navigationOptions: {
      title: 'Menu Principal',
      headerRight: (<View></View>)
    }
  },
  'Main2': {
    screen: Main2,
    navigationOptions: {
      title: 'Menu Principal',
      headerRight: (<View></View>)
    },
  },
  'SecondMain': {
    screen: SecondMain,
    navigationOptions: {
      title: 'Menu Querer'
    }
  },
  'Action1': {
    screen: Action1,
    navigationOptions: {
      title: 'Ações'
    }
  },
...
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      headerTitleStyle: {
        fontWeight: 'bold'
      },
      headerLeft: (
        <Button transparent onPress={() => navigation.toggleDrawer()}>
          <Icon name='menu' style={{color: '#FFF'}} />
        </Button>
      ),
      headerRight: (
        <HomeIcon navigation={navigation} />
      ),
      headerStyle: {
        backgroundColor: '#b80003'
      },
      headerTintColor: '#FFF'
    }
  }
});

const DrawerConfig = {
  drawerWidth: Dimensions.get('window').width * 0.75,
  contentComponent: ({ navigation }) => {
    return(<MenuDrawer navigation={navigation} />)
  }
}

const DrawerNavigator = createDrawerNavigator (
  {
    'Principal': {
      screen: HomeNavigator
    },
    'Sobre o Aplicativo': {
      screen: InformationApp
    },
    'Sobre os Responsáveis': {
      screen: Team
    },
    'Sobre o Projeto': {
      screen: Project
    },
    'Política e Termos': {
      screen: Policy
    }
  },
  DrawerConfig
);

const AppDrawerContainer = createAppContainer(DrawerNavigator);

export default AppDrawerContainer;

Answer 1

你可以试试 reset ，改变方法 navLink

import { StackActions, NavigationActions } from 'react-navigation';

navLink(nav, text) {
  return (
    <TouchableOpacity
      style={{ height: 50 }}
      onPress={() => {
        const resetAction = StackActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: nav })]
        });
        this.props.navigation.dispatch(resetAction);
      }}
    >
      <Text style={styles.link}>{text}</Text>
    </TouchableOpacity>
  );
}

Answer 2

尝试使用 this.props.navigation.push('your_pagename') 这会将新项目推入堆栈。这意味着当使用 push componentDidMount() 方法再次调用时

如何强制 stackNavigator 以 MainScreen 为目标？

How to force stackNavigator to target MainScreen?

javascript

stack

react-native

react-navigation

react-navigation-drawer