Question

我是本机新手。我将Atom和Nuclide用作我的本机开发的IDE。

好吧，我使用expo init来构建我的项目。我使用了带有3个导航底部栏的项目示例。

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack
});

我的HomeStack变量

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

我使用react-navigation在屏幕之间导航。看起来不错。但是，我需要用户在加载HomeStack之前先进入登录屏幕。假设它是LoginScreen。因此屏幕像波纹管

Splash Screen -> LoginScreen -> HomeScreen (with Bottom Navigation)

如何在本机上设置主屏幕？我一直在寻找几个S / O问题并发布在Medium上，但没有赶上我想要的任何东西。

我已将MainTabNavigator.js修改为以下

import LoginScreen from '../screens/LoginScreen';

const LoginStack = createStackNavigator({
  Index: LoginScreen,
});

LoginStack.navigationOptions = {
  tabBarLabel: 'Index',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

我一直在寻找一个用于设置默认主屏幕的整个项目，但是没有找到用于设置默认主屏幕的任何代码部分。谢谢你们

Answer 1

React Navigation为您的应用提供了一种在屏幕之间切换的方式。根据您的要求，Splash Screen -> LoginScreen -> HomeScreen (with Bottom Navigation)嵌套导航堆栈将与StackNavigator和TabNavigator一起使用。

对于主屏幕，需要创建StackNavigator：

const stackNavigationHome = createStackNavigator({ Home , HomeDetail});

对于设置屏幕StackNavigator如下所示：

const stackNavigationSetting = createStackNavigator({ Settings},{headerMode: 'none'});

Home和Settings屏幕都将位于TabNavigator中：

const TabNavigator = createBottomTabNavigator({
  home: stackNavigationHome,
  settings: stackNavigationSetting,
});

在堆栈的初始位置，您需要使用以下登录名和选项卡进行堆栈导航：

const stackNavigationLogin = createStackNavigator({ Login, TabNavigator},{headerMode: 'none'});

导航结构已在此处完成，现在需要创建App容器：

export default createAppContainer(stackNavigationLogin);

您可以找到完整的source on Github

React Native Set主页屏幕/主要活动

1 个答案: