Question

我正在尝试使用AuthLoading，AuthStack和AppStack来实现React导航。

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

这是我从“个人资料”导航到“编辑个人资料”时的样子。 Issue它有一个双标头，没有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

您能像下面这样写导航吗？

...

// 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和带有主页/配置文件的BottomTabNavigation。在BottomTabNavigation的顶部添加AppStack，HomeStack和ProfileStack堆栈导航器是为什么要获得堆叠的标题（导航器太多）的原因。

反应导航：AuthLoading，AuthStack和AppStack +嵌套StackNavigator

2 个答案: