react native - 如何一起使用stackNavigator和DrawerNavigator

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

现在，抽屉导航中的“主”屏幕可以使用堆栈导航。您也可以对其他屏幕执行此操作。