react native - 如何一起使用 stack Navigator 和 Drawer Navigator

Question

我正在尝试同时使用 React Native DrawerNavigator 和 StackNavigator，但由于某些原因我无法使其工作。

下面是我的代码：

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 屏幕。有没有办法让这两者一起工作？

还有，stackNavigator和createStack Navigator有什么区别？当我运行这些时，我没有看到差异。

Answer 1

您需要嵌套导航器才能获得您想要的结果。例如，如果您想在抽屉式导航中的其中一个屏幕内使用堆栈导航，您可以这样做：

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
})

现在抽屉导航中的 "Home" 屏幕可以使用堆栈导航。您也可以为其他屏幕执行此操作。

react native - 如何一起使用 stack Navigator 和 Drawer Navigator

react native - how to use stackNavigator and DrawerNavigator together

navigation-drawer

reactjs

react-native