在离开标签时反应本机标签重置

Question

我正在使用react导航来开发本机选项卡式应用程序。

我有两个标签，HomeScreen和SettingsScreen和一个DetailsS​​creen。

在主屏幕标签上，我有

1. 按钮
2. 当用户单击按钮时，将进入详细信息屏幕。

现在，如果底部选项卡中的用户单击SettingsScreen选项卡并返回到HomeScreen选项卡，则屏幕DetailsScreen仍处于活动状态。

这是代码：

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createBottomTabNavigator,
    createStackNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Home!</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}


class DetailsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Details!</Text>
            </View>
        );
    }
}



class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Details: DetailsScreen,
});

const SettingsStack = createStackNavigator({
    Settings: SettingsScreen
});


export default createBottomTabNavigator(
    {
        Home: HomeStack,
        Settings: SettingsStack,
    }
);

如何使用户从标签SettingsScreen返回到HomeScreen时，他们将看到带有按钮而不是DetailsScreen的HomeScreen。