React Native 设置主页屏幕/主要活动 [英] React Native Set Homepage Screen / Main Activity

问题描述

我是 react-native 的新手.我使用 Atom 和 Nuclide 作为我的 react-native 开发的 IDE.

I'm new in react-native. I use Atom and Nuclide as IDE for my react-native development.

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

Well, I use expo init to build my project. I used project example with 3 navigation bottom bar.

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

我的 HomeStack 变量

My HomeStack variable

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 加载之前进入我的登录屏幕.假设它登录屏幕.所以屏幕流像波纹管

I used react-navigation to navigate between screen. Its looks fine. However, I need user going to my login screen before HomeStack loaded up. Let say it LoginScreen. So the screen flow like bellow

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

如何在 react-native 上设置主屏幕?我一直在寻找几个 S/O 问题并在 Medium 上发帖，但没有找到我要找的任何东西.

How to set main screen on react-native? I have been looking several S/O question and post on Medium but didn't catch up anything I looking for.

我修改了 MainTabNavigator.js 如下

I have modified MainTabNavigator.js as bellow

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

我一直在寻找一个完整的项目来设置默认主屏幕，但没有找到任何代码部分来设置默认主屏幕.谢谢各位

I've been looking for a whole project to set up default main screen and not found any code section to set up default main screen. Thanks Guys

推荐答案

React Navigation 为您的应用提供了一种在屏幕之间切换的方式.根据您的要求 Splash Screen ->登录屏幕 ->HomeScreen(带底部导航) 嵌套导航堆栈将与 StackNavigator 一起使用TabNavigator.

React Navigation provides a way for your app to transition between screens. As per your require Splash Screen -> LoginScreen -> HomeScreen (with Bottom Navigation) nested navigation stack will be used with StackNavigator & TabNavigator.

对于主屏幕需要创建 StackNavigator:

for Home screen need to create StackNavigator:

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

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

For settings screen StackNavigator like as below:

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

Home 和Settings 屏幕将在 TabNavigator 中:

Both Home & Settings screen will be in a TabNavigator:

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

在堆栈的初始点，您需要一个带有登录名和选项卡的堆栈导航，如下所示:

At initial point of stack you need a stack navigation with login and tab as below:

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

导航结构到此完成，现在需要创建App容器:

Navigation structure completed here, now need to create App container :

export default createAppContainer(stackNavigationLogin);

您可以在 Github 上找到完整的源

You can find complete source on Github

这篇关于React Native 设置主页屏幕/主要活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！