Question

我有带有React Navigation的React Native应用程序。在我的应用程序中，tabNavigator内的3个标签：CHANNELS，FAVORITES，PROFILE_SCREEN。我需要将CHANNELS的stackNavigator制作到另一个屏幕。如何为CHANNELS选项卡创建stackNavigator？我该怎么做？如何使流程流畅有人可以提供帮助？

import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
  createBottomTabNavigator
} from 'react-navigation'
import { ChannelsScreen, AuthScreen, ProfileScreen, FavoritesScreen, AuthLoadingScreen } from './screens'
import { BLUE, PROJECT_FONT } from './constants'

const AuthStack = createStackNavigator({ AUTH_SCREEN: AuthScreen })
const AppStack = createBottomTabNavigator(
  {
    CHANNELS: {
      screen: ChannelsScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-stats" size={30} />,
        tabBarLabel: 'Channels'
      })
    },
    FAVORITES: {
      screen: FavoritesScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-flower" size={30} />,
        tabBarLabel: 'Favorites'
      })
    },
    PROFILE_SCREEN: {
      screen: ProfileScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-body" size={30} />,
        tabBarLabel: 'Profile'
      })
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      lazy: true,
      activeTintColor: BLUE,
      inactiveTintColor: '#586589',
      labelStyle: {
        fontSize: 15,
        fontFamily: PROJECT_FONT,
        fontWeight: 'bold'
      }
    }
  }
)

AppStack.navigationOptions = {
  header: null
}

const AppNavigator = createAppContainer(
  createSwitchNavigator(
    {
      App: AppStack,
      Auth: AuthStack,
      AuthLoading: AuthLoadingScreen
    },
    {
      initialRouteName: 'AuthLoading'
    }
  )
)

export default AppNavigator

Answer 1

您在这里的位置正确。您需要做的就是不要将选项卡引用到屏幕上，而是将它们引用到堆栈导航器上。

有关嵌套导航的更多文档和示例，请参考此链接： https://reactnavigation.org/docs/en/tab-based-navigation.html#a-stack-navigator-for-each-tab

这是您的代码的外观：

// ...import statements

const AuthStack = createStackNavigator({ AUTH_SCREEN: AuthScreen })

// Declare Stack Navigator for Each Tab
const ChannelsStack = createStackNavigator({ CHANNELS_SCREEN: ChannelsScreen });
const FavoritesStack = createStackNavigator({ FAVORITES_SCREEN: FavoritesScreen });
const ProfileStack = createStackNavigator({ PROFILE_SCREEN: ProfileScreen });



const AppStack = createBottomTabNavigator(
  {
    CHANNELS: {
      screen: ChannelsStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-stats" size={30} />,
        tabBarLabel: 'Channels'
      })
    },
    FAVORITES: {
      screen: FavoritesStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-flower" size={30} />,
        tabBarLabel: 'Favorites'
      })
    },
    PROFILE_SCREEN: {
      screen: ProfileStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-body" size={30} />,
        tabBarLabel: 'Profile'
      })
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      lazy: true,
      activeTintColor: BLUE,
      inactiveTintColor: '#586589',
      labelStyle: {
        fontSize: 15,
        fontFamily: PROJECT_FONT,
        fontWeight: 'bold'
      }
    }
  }
)

AppStack.navigationOptions = {
  header: null
}

//...rest of code.

Answer 2

对我来说，解决方案是为每个堆栈创建单独的文件夹，然后将其导出。如果有人有兴趣，可以在这里查看：https://github.com/jocoders/reactNativeChannelApp/tree/master/src/screens/ChannelsStack

如何使用React Navigation在TabNavigator中创建嵌套的StackNavigator

2 个答案: