本地反应-如何一起使用stackNavigator和DrawerNavigator [英] react native - how to use stackNavigator and DrawerNavigator together

问题描述

我正在尝试同时使用本机DrawerNavigator和StackNavigator，但是由于某些原因，我无法使其正常工作.

I am trying to use react native DrawerNavigator and StackNavigator together but for some reason I can't make it work.

下面是我的代码:

import {DrawerNavigator,StackNavigator, } from 'react-navigation'

class App extends Component {
  render(){
    return(
      <View style={{flex:1,backgroundColor:'transparent'}}>
        <AppStackNavigator/>
        <AppDrawerNavigator/>
       </View>
    )
  }
}

const AppDrawerNavigator = DrawerNavigator({
  Home:HomeScreen,
  Price:PriceScreen,
  Info:InfoScreen,
  Login:LoginScreen
})

const  AppStackNavigator = StackNavigator({
  Home:HomeScreen,
  Price:PriceScreen,
  Info:InfoScreen,
  Login:LoginScreen
})

export default App

当我运行此代码时，我的应用程序屏幕被分成两半，顶部显示stackNavigator屏幕，下半部分显示DrawerNavigator屏幕. 有什么办法可以使这两个一起工作?

When I run this code my app screen is split into half, top have shows stackNavigator screen and the bottom half shows DrawerNavigator screen. Is there a way I can make these two work together?

此外，stackNavigator和createStack Navigator有什么区别?运行这些文件时看不到差异.

Also, what is the difference between stackNavigator and createStack Navigator? I don't see the diffence when I run these.

推荐答案

您需要嵌套导航器才能获得所需的结果. 例如，如果您希望在抽屉式导航的一个屏幕内显示堆栈导航，则可以执行以下操作:

You need to nest the Navigators to get the result you are asking for. For example if you want a stack navigation inside one of the screens in your drawer navigation you can do this:

import {DrawerNavigator, StackNavigator} from 'react-navigation'
class App extends Component {
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'transparent' }}>
                <AppDrawerNavigator />
            </View>
        )
    }
}

const AppStackNavigator = StackNavigator({
    Home: HomeScreen,
    Price: PriceScreen,
    Info: InfoScreen,
    Login: LoginScreen
})

const AppDrawerNavigator = DrawerNavigator({
    Home: AppStackNavigator,
    // Price: PriceScreen,
    // Info: InfoScreen,
    // Login: LoginScreen
})

 export default App

重要的是

const AppDrawerNavigator = DrawerNavigator({
    Home: AppStackNavigator, <--- This
    // Price: PriceScreen,
    // Info: InfoScreen,
    // Login: LoginScreen
})

现在，抽屉导航"中的主页"屏幕可以使用堆栈导航了.您也可以在其他屏幕上执行此操作.

Now the "Home" Screen in your Drawer Navigation has the ability to use the stack navigation. You can do this for the others screens as well.

这篇关于本地反应-如何一起使用stackNavigator和DrawerNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！