Я пытаюсь интегрировать свой BottomTabNavigator в свой StackNavigator.

У меня есть навигатор стека для перехода на любой экран. Но у меня также есть навигатор вкладок, в котором всего четыре экрана.

Я хотел бы, чтобы навигатор вкладок появлялся на каждом экране, кроме экранов входа и создания.

Я пробовал много вариантов их комбинирования, но ни один из них не работает

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 stack-navigator react-native-navigation react-native-tabnavigator
person Fez Abbas    schedule 23.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте стек Tab Navigator в основной стек, где будут доступны все остальные экраны. Так что вы можете легко перейти к этим экранам.

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)
person Swapnil    schedule 23.05.2019
comment
Привет, спасибо за это. В вашем ответе вместо ScanScreen и SearchScreen у меня теперь есть ScanStack и SearchStack. Моя новая проблема заключается в том, что я не могу передавать реквизиты через стеки. - person Fez Abbas; 24.05.2019