我正在尝试将我的 BottomTabNavigator 集成到我的 StackNavigator答案

【问题标题】：I'm trying to integrate my BottomTabNavigator into my StackNavigator我正在尝试将我的 BottomTabNavigator 集成到我的 StackNavigator
【发布时间】：2019-05-23 16:22:43
【问题描述】：

我有一个堆栈导航器，用于导航到所需的任何屏幕。但我也有一个只有四个屏幕的选项卡导航器。

我想让 Tab Navigator 出现在除登录和创建屏幕之外的每个屏幕上。

我已经尝试了很多组合这些的变体，但似乎都不起作用

const stackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  Scan: {
    screen: ScanScreen
  },
  Search: {
    screen: SearchScreen
  },
  Product: {
    screen: ProductScreen
  },
  Create: {
    screen: CreateScreen
  },
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  }
}, {
  headerMode: 'none',
  defaultNavigationOptions: {
    gesturesEnabled: false
  }
})

const tabNav = createBottomTabNavigator({
  HomeTab: {
    screen: HomeScreen,
  },
  ScanTab: {
    screen: ScanScreen,
  },
  SearchTab: {
    screen: SearchScreen,
  },
  ProfileTab: {
    screen: ProfileScreen,
  }
})


export default createAppContainer(stackNav)

【问题讨论】：

标签： react-native react-native-navigation stack-navigator react-native-tabnavigator

【解决方案1】：

在主堆栈中添加选项卡导航器堆栈，您的所有其他屏幕都将可用。这样您就可以轻松导航到这些屏幕。

const tabNav = createBottomTabNavigator({
  HomeTab: {
    screen: HomeScreen,
  },
  ScanTab: {
    screen: ScanScreen,
  },
  SearchTab: {
    screen: SearchScreen,
  },
  ProfileTab: {
    screen: ProfileScreen,
  }
})

const stackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  Create: {
    screen: CreateScreen
  },
  // Tab Navigator screens 
  Home: { 
    screen : tabNav 
  }
}, 
{
   headerMode: 'none',
   defaultNavigationOptions: {
   gesturesEnabled: false
}}
);

export default createAppContainer(stackNav)

【讨论】：

您好，谢谢。在您的答案中，我现在有 ScanStack 和 SearchStack，而不是 ScanScreen 和 SearchScreen。我的新问题是我无法通过堆栈传递道具。