反应本机设置主页屏幕/主要活动

Question

我是 react-native 的新手。我使用 Atom 和 Nuclide 作为 IDE 进行反应原生开发。

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

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

我的主堆栈变量

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加载之前转到我的登录屏幕。让我们说它登录屏幕。所以屏幕像波纹管一样流动

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一起使用。

对于主屏幕需要创建堆栈导航器：

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

对于设置屏幕，堆栈导航器如下所示：

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);

你可以在Github上找到完整的源代码