Реагируйте с навигацией: AuthLoading, AuthStack и AppStack + вложенные стека-навигаторы

Question

Я пытаюсь реализовать React Navigation с AuthLoading, AuthStack и AppStack.

AppStack будет содержать bottomTabNavigator с двумя вкладками: Home + Profile.Экран профиля будет иметь кнопку редактирования, которая должна перенаправлять на экран EditProfile.

Вот как это выглядит при переходе от профиля к профилю редактирования. Выпуск У него двойной заголовок и нет bottomTabNavigator?

Полный код:

// 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

Вы должны использовать только один стек за раз.

// 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 с логином / регистрацией / утерянным паролем и BottomTabNavigation с Home / Profile - все, что вам нужно. Добавление стековых навигаторов AppStack, HomeStack и ProfileStack поверх BottomTabNavigation - вот почему вы получаете стекированные заголовки (слишком много навигаторов).

Answer 2

Можете ли вы переписать вашу навигацию следующим образом?

...

// 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,
});


...