Question

当我单击底部导航选项卡时，我希望屏幕返回至该底部选项卡的初始屏幕，例如，当我导航至RouteToProfile时，然后按search（BottomTabNavigator）并返回首页，我仍然找到RouteToprofile的屏幕 ps：我正在使用反应导航3.0.0

  -Home
      |
       mainScreen  
       Subrouts 
      RouteToProfile 
      ....

  -Search 
        |
         mainScreen
         another page
          ....

import React from "react";

import Ionicons from "react-native-vector-icons/Ionicons";

import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer
} from "react-navigation";

import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";
import DetailsScreen from "./DetailsScreen";
import ProfileScreen from "./ProfileScreen";
import NotificationsScreen from "./NotificationsScreen";
import Page from "./Page";
import SearchScreen from "./SearchScreen";
import RdvConfirmation from "./RdvConfirmation";
import ProfileDoctor from "./ProfileDoctor";
import Choisirdate from "./Choisirdate";
import Choisirtime from "./Choisirtime";

const HomeStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
    Page: { screen: Page }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#42f44b"
      },
      headerTintColor: "#FFFFFF",
      title: "Home"
      //Header title
    }
  }
);
const SearchStack = createStackNavigator(
  {
    //Defination of Navigaton from home screen
    search: { screen: SearchScreen },
    ProfileDoctor: { screen: ProfileDoctor },
    Choisirdate: { screen: Choisirdate },
    Choisirtime: { screen: Choisirtime },
    RdvConfirmation: { screen: RdvConfirmation }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#42f44b"
      },
      headerTintColor: "#FFFFFF",
      title: "Search"
    }
  }
);

const NotificationsStack = createStackNavigator(
  {
    Notifications: { screen: NotificationsScreen }
    //  ,MesRDv: { screen: page }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#42f44b"
      },
      headerTintColor: "#FFFFFF",
      title: "Notifications"
      //Header title
    }
  }
);
const SettingsStack = createStackNavigator(
  {
    //Defination of Navigaton from setting screen
    Settings: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
    Profile: { screen: ProfileScreen }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#42f44b"
      },
      headerTintColor: "#FFFFFF",
      title: "Settings"
      //Header title
    }
  },
  {
    initialRouteName: SearchScreen
  }
);
const App = createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    search: { screen: SearchStack },
    Notifications: { screen: NotificationsStack },
    Settings: { screen: SettingsStack }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-medkit${focused ? "" : "-outline"}`;
        } else if (routeName === "Settings") {
          iconName = `ios-settings${focused ? "" : "-outline"}`;
        } else if (routeName === "Notifications") {
          iconName = `ios-notifications${focused ? "" : "-outline"}`;
        } else if (routeName === "search") {
          iconName = `ios-search${focused ? "" : "-outline"}`;
        }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: "#42f44b",
      inactiveTintColor: "gray"
    }
  }
);
export default createAppContainer(App);

Answer 1

您可以像这样为HomeStack制作一个单独的组件：

    const HomeStackNavigation = createStackNavigator(
      {
        Home: { screen: HomeScreen },
        Details: { screen: DetailsScreen },
        Page: { screen: Page }
      }
export default class HomeStack extends React.Component {
    render() {
        return (
            <HomeStackNavigation
                screenProps={{ rootNavigation: this.props.navigation }}
            />
        );
    }
}

，并将此HomeStack用作bottomTabNavigator中的屏幕，然后在HomeStackNavigation的任何屏幕中使用如下所示的screenProps：

const rootNav = this.props.screenProps.rootNavigation;
rootNav.navigate('ScreenName');

如何制作“按下BottomTabNavigator时返回初始屏幕”

1 个答案: