在ReactNavigation的stackNavigator和BottomTabNavigator上时如何重置到根屏幕

Question

我看到了很多关于该主题的帖子，但是都没有解决我的问题。

我有一个导航类，该导航类允许我创建不同的stackNavigator（如果我正确理解ReactNavigation的文档，则可以使用它称为开始屏幕或initialRoute）。

我还创建了一个BottomTabNavigator，每个选项卡都将用户发送到特定的StackNavigator。

我的问题： -我从主屏幕开始，然后转到Screen2（主页->屏幕1->屏幕2）（在我的StackNavigator中向下）。 -我使用我的BottomTabNavigator转到另一个StackNavigator。 -我回到BottomTabNavigator的“主页”选项卡上，在那里直接显示了Screen2。

我想要的是：为每个StackNavigator定义一个起始屏幕，当我使用BottomTabNavigator进入其中一个时，它会显示此起始屏幕，而不是离开前显示的最后一个屏幕。

这是我的导航文件：

const Tab = createBottomTabNavigator()

const HomeStack = createStackNavigator()
const MoneyStack = createStackNavigator()
const StuffStack = createStackNavigator()
const TestStack = createStackNavigator()

function HomeStackScreen() {
    return (
        <HomeStack.Navigator
            initialRouteName='Home'
            screenOptions={{
            headerStyle: {
                backgroundColor: '#003F5C',
            },
            headerTintColor: '#FB5B5A',
            }}>
            <HomeStack.Screen name="Home"
            component={Home} 
            options={({route, navigation}) => (
                {headerTitle: 'Home Page',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <HomeStack.Screen name="AddMoney"
            component={AddMoney} 
            options={({route, navigation}) => (
                {headerTitle: 'Prêt d\'argent',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <HomeStack.Screen name="AddStuff"
            component={AddStuff} 
            options={({route, navigation}) => (
                {headerTitle: 'Prêt d\'objet',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <HomeStack.Screen name="Settings"
            component={Settings} 
            options={({route, navigation}) => (
                {headerTitle: 'Settings',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <HomeStack.Screen name="TypesList"
            component={TypesList} 
            options={({route, navigation}) => (
                {headerTitle: 'Les types',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
        </HomeStack.Navigator>
    )
}

function MoneyStackScreen() {
    return(
        <MoneyStack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: '#003F5C',
            },
            headerTintColor: '#FB5B5A',
            }}>
            <MoneyStack.Screen name="LendList" 
            component={LendList}
            initialParams={{ type: 'Money' }}
            options={({route, navigation}) => (
                {headerTitle: 'Mes prêts',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <MoneyStack.Screen name="AddMoney"
            component={AddMoney} 
            options={({route, navigation}) => (
                {headerTitle: 'Prêt d\'argent',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <MoneyStack.Screen name="ItemDetails"
            component={ItemDetails} 
            options={({route, navigation}) => (
                {headerTitle: 'Détails',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
        </MoneyStack.Navigator>
    )
}

function StuffStackScreen() {
    return(
        <StuffStack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: '#003F5C',
            },
            headerTintColor: '#FB5B5A',
            }}>
            <StuffStack.Screen name="LendList" 
            component={LendList}
            initialParams={{ type: 'Stuff' }}
            options={({route, navigation}) => (
                {headerTitle: 'Mes prêts',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <StuffStack.Screen name="AddStuff"
            component={AddStuff} 
            options={({route, navigation}) => (
                {headerTitle: 'Prêt d\'objet',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <StuffStack.Screen name="ItemDetails"
            component={ItemDetails} 
            options={({route, navigation}) => (
                {headerTitle: 'Détails',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
        </StuffStack.Navigator>
    )
}

function TestStackScreen() {
    return(
        <TestStack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: '#003F5C',
            },
            headerTintColor: '#FB5B5A',
            }}>
            <TestStack.Screen name="Test"
            component={Test} 
            options={({route, navigation}) => (
                {headerTitle: 'Test',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
            <TestStack.Screen name="ItemDetails"
            component={ItemDetails} 
            options={({route, navigation}) => (
                {headerTitle: 'Détails',
                route: {route}, 
                navigation: {navigation}}
            )}
            />
        </TestStack.Navigator>
    )
}

function App() {
    return(
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName;
                        let prefix;

                        (Platform.OS === 'android')? prefix = 'md-' : prefix = 'ios-'

                        if (route.name === 'Home') {
                            iconName = 'home'
                        } else if (route.name === 'Money') {
                            iconName = 'cash'
                        } else if (route.name === 'Stuff') {
                            iconName = 'cube'
                        } else if (route.name === 'Test') {
                            iconName = 'beaker'
                        }

                        iconName = prefix + iconName

                        // You can return any component that you like here!
                        return <Ionicons name={iconName} size={size} color={color} />;
                    },
                })}
                tabBarOptions={{
                    activeTintColor: '#FB5B5A',
                    activeBackgroundColor: 'white',
                    inactiveTintColor: '#FB5B5A',
                    inactiveBackgroundColor: '#003F5C'
                }}
            >
                <Tab.Screen name='Home' component={HomeStackScreen} initialRouteName='Home' />
                <Tab.Screen name='Money' component={MoneyStackScreen} />
                <Tab.Screen name='Stuff' component={StuffStackScreen} />
                <Tab.Screen name='Test' component={TestStackScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

export default App

这是我试图在ReactNavigation中使用“重置”功能的Home文件部分

const resetAction = CommonActions.reset（{ 索引：0， 路线：[ {name：'Home'}， ]， }）

导出默认类Home扩展了React.Component {

constructor(props) {
    super(props)
    this._goToSettings = this._goToSettings.bind(this)

    this.state = { 
        totalMoney: 0,
        totalQuantity: 0,
        isLoading: true
    }
}

componentDidMount(){
    const { navigation } = this.props

    this.focusListener = navigation.addListener('focus', () => {
        this._getData()
        console.log('coucou')
        navigation.dispatch(resetAction)
    });
    this._updateNavigationParams()
}

componentWillUnmount() {
    // Remove the event listener before removing the screen from the stack
    this.focusListener();
}

}

请随时询问您是否需要更多详细信息。