React Navigation：AuthLoading、AuthStack 和 AppStack + Nested StackNavigators

Question

我正在尝试使用 AuthLoading、AuthStack 和 AppStack 实现 React Navigation。

AppStack 将包含一个带有 2 个选项卡的 bottomTabNavigator：主页 + 个人资料。 配置文件屏幕将有一个编辑按钮，该按钮应路由到 EditProfile 屏幕。

这是我从个人资料导航到编辑个人资料时的样子。 Issue 它有一个双标题，没有底部TabNavigator？

完整代码：

// Imports: Dependencies
import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Provider } from 'react-redux';
import store from './store/store';
import { Button } from 'react-native';

// Imports: Screens
import AuthLoading from './screens/AuthLoading';
import Login from './screens/Login';
import SignUp from './screens/SignUp';
import Home from './screens/Home';
import Profile from './screens/Profile';
import EditProfile from './screens/EditProfile';
import Filters from './screens/Filters';

// React Navigation: Bottom Tab Navigator
export const BottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="menu" color={tintColor} size={26} />
        ),
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="perm-identity" color={tintColor} size={26} />
        ),
      }
    }
  },
  {
    mode: 'screen',
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerTitle: routeName
      };
    }
  }
);

// React Navigation: Authentication Stack Navigator
export const AuthStack = createStackNavigator({
  // Screens
  SignUp: SignUp,
  Login: Login,
});

// React Navigation: Home Stack Navigator
export const HomeStack = createStackNavigator({
  Home: Home,
  Filters: Filters,
});

// React Navigation: Profile Stack Navigator
export const ProfileStack = createStackNavigator({
  Profile: Profile,
  EditProfile: EditProfile,
});

// React Navigation: Application Stack Navigator
export const AppStack = createStackNavigator({
  // Navigators
  BottomTabNavigator: BottomTabNavigator,
  // Screens
  Home: HomeStack,
  Profile: ProfileStack,
});

// React Navigation: Switch Container
export const AppContainer = createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    AuthStack: AuthStack,
    AppStack: AppStack,
  },
    // Options
  {
    initialRouteName: 'AuthLoading',
  }
));

// React Native: Application
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );
  }
}

Answer 1

你能像下面这样重写你的导航吗？

...

// React Navigation: Authentication Stack Navigator
export const AuthStack = createStackNavigator({
  // Screens
  SignUp: SignUp,
  Login: Login,
  ForgotPassword: ForgotPassword,
});

// React Navigation: Home Stack Navigator
export const HomeStack = createStackNavigator({
  Home: Home,
  Filters: Filters,
  Profile: Profile,
  EditProfile: EditProfile,
});

// React Navigation: Application Stack Navigator
export const AppStack = createStackNavigator({
  // Navigators
  BottomTabNavigator: BottomTabNavigator,
  // Screens
  Home: HomeStack,
});


...

Answer 2

您一次只能使用一个堆栈。

// Imports: Dependencies
import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Provider } from 'react-redux';
import store from './store/store';
import { Button } from 'react-native';

// Imports: Screens
import AuthLoading from './screens/AuthLoading';
import Login from './screens/Login';
import SignUp from './screens/SignUp';
import Home from './screens/Home';
import Profile from './screens/Profile';
import EditProfile from './screens/EditProfile';
import Filters from './screens/Filters';

// React Navigation: Bottom Tab Navigator
export const BottomTabNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => ( <Icon name="menu" color={tintColor} size={26} />),
            }
        },
        Profile: {
            screen: Profile,
            navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({ tintColor }) => (<Icon name="perm-identity" color={tintColor} size={26} />),
            }
        }
    },
    {
        mode: 'screen',
        navigationOptions: ({ navigation }) => {
            const { routeName } = navigation.state.routes[navigation.state.index];
            return { headerTitle: routeName };
        }
    }
);

// React Navigation: Authentication Stack Navigator
export const AuthStack = createStackNavigator({
    // Screens
    SignUp: SignUp,
    Login: Login,
});
// React Navigation: Switch Container
export const AppContainer = createAppContainer(createSwitchNavigator(
    {
        AuthLoading: AuthLoading,
        AuthStack: AuthStack,
        AppStack: BottomTabNavigator,
    },
    // Options
    {
        initialRouteName: 'AuthLoading',
    }
));

// React Native: Application
export default class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

删除 AppStack、HomeStack 和 ProfileStack。这些是多余的，因为导航到主页和个人资料由底部选项卡处理。 AuthLoading、带有登录/注册/丢失密码的 AuthStack 和带有 Home/Profile 的 BottomTabNavigation 就是您所需要的。在 BottomTabNavigation 顶部添加 AppStack、HomeStack 和 ProfileStack 堆栈导航器是您获得堆叠标题（导航器太多）的原因。