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

IT技术 reactjs react-native navigation-drawer
2021-05-04 15:41:06

我正在尝试将 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屏幕,下半部分显示屏幕。有没有办法让这两个一起工作?

此外,之间有什么区别stackNavigatorcreateStack Navigator当我运行这些时,我没有看到差异。

1个回答

您需要嵌套 Navigators 以获得您要求的结果。例如,如果您希望在抽屉导航中的屏幕之一内进行堆栈导航,则可以执行以下操作:

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

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