React native 在制表符左边进行本机制表符重置

React native 在制表符左边进行本机制表符重置,react-native,react-router,react-navigation,react-native-ios,react-native-flatlist,React Native,React Router,React Navigation,React Native Ios,React Native Flatlist,我正在使用react导航开发react本机选项卡应用程序 我有两个选项卡,主屏幕和设置屏幕和一个详细屏幕 在tab主屏幕上,我有 钮扣 当用户单击按钮时,将进入详细信息屏幕 现在,如果用户从底部选项卡单击设置屏幕选项卡并返回到主屏幕选项卡,屏幕详细信息屏幕仍处于活动状态 以下是代码: import React from 'react'; import { Text, View,Button } from 'react-native'; import { createBottomTabNaviga

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

我有两个选项卡,
主屏幕
设置屏幕
和一个详细屏幕

在tab主屏幕上,我有

  • 钮扣
  • 当用户单击按钮时,将进入详细信息屏幕
  • 现在,如果用户从底部选项卡单击
    设置屏幕
    选项卡并返回到
    主屏幕
    选项卡,屏幕
    详细信息屏幕
    仍处于活动状态

    以下是代码:

    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,
        }
    );
    
    从“React”导入React;
    从“react native”导入{文本、视图、按钮};
    导入{CreateBoottomTabNavigator,
    createStackNavigator}来自“反应导航”;
    类主屏幕扩展了React.Component{
    render(){
    返回(
    回家!
    this.props.navigation.navigate('Details')}
    />
    );
    }
    }
    类DetailsScreen扩展了React.Component{
    render(){
    返回(
    细节!
    );
    }
    }
    类设置屏幕扩展React.Component{
    render(){
    返回(
    设置!
    );
    }
    }
    const HomeStack=createStackNavigator({
    主页:主屏幕,
    详情:详情屏幕,
    });
    const SettingsStack=createStackNavigator({
    设置:设置屏幕
    });
    导出默认CreateBoottomTabNavigator(
    {
    家:家装,
    设置:设置策略,
    }
    );
    
    当用户从选项卡
    设置屏幕
    返回到
    主屏幕
    时,他们将看到带有按钮的主屏幕,而不是
    详细屏幕