我正在为反应原生（iOS）的嵌套导航而苦苦挣扎。我已经阅读了有关抽屉导航的文档，但它仍然非常令人困惑......
这是我要去的导航树：
Landing page
=> Screen 1
=> DrawerNavigator
=> Screen 2.1
=> Screen 2.2
=> Screen 2.3
=> Screen 2.4
=> Screen 2.5
你能给我一个如何实现这一点的提示吗？我已经获得第一页导航到堆栈的第二页，但从那里我不知道如何设置抽屉导航。
非常感谢！
到目前为止我的代码：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Image,
View,
Dimensions,
} from 'react-native';
// import SplashScreen from 'react-native-splash-screen'
import {
Container,
Title,
Content,
Button,
Icon,
Text,
} from 'native-base'
import {StackNavigator, DrawerNavigator} from 'react-navigation'
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerLeft:
<Button transparent >
<Icon name='menu'/>
</Button>
}
render() {
return (
<Container style={styles.home}>
<Content>
<Text>It works</Text>
</Content>
</Container>
);
}
}
// class FAQScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
// class AboutScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
// class EventScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
// class ChatScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
// class TrendScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
// class SearchScreen extends React.Component {
// render(){
// const{navigate} = this.props.navigation
// return(
//
// )
// }
// }
export default class Main extends Component {
static navigationOptions = {
title: 'Career Center',
}
render() {
const{navigate} = this.props.navigation
return (
<Container>
<Content>
<Image source={require('./components/img/bkgrnd.jpg')} blurRadius={2} style={styles.backgroundImage}>
<View style={styles.view}>
<Image source={require('./components/img/Asset10.png')} style={styles.photo}/>
<Text style={styles.text}>Welcome to Career Center</Text>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<Button transparent primary style={styles.button} onPress={() => navigate('Home')}><Text>Let's Begin <Icon name='ios-arrow-dropright-circle'style={{fontSize: 20}}/></Text></Button>
</View>
</Image>
</Content>
</Container>
)
}
}
const ModalStack = StackNavigator({
Main: {
screen: Main,
},
Home:{
screen: MyHomeScreen
},
});
// const ModalDrawer = DrawerNavigator({
// Home:{
// screen: MyHomeScreen
// },
// FAQ:{
// screen: FAQScreen
// },
// About:{
// screen: AboutScreen
// },
// Event:{
// screen: EventScreen
// },
// Chat:{
// screen: ChatScreen
// },
// Trend:{
// screen: TrendScreen
// },
// Search:{
// screen: SearchScreen
// }
// })
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
home:{
backgroundColor: 'pink'
},
backgroundImage:{
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
photo:{
width: 200,
height: 200,
justifyContent:"center",
alignSelf:"center",
},
text:{
paddingTop: 40,
paddingLeft:30,
paddingRight:30,
justifyContent:"center",
alignSelf:"center",
},
view:{
paddingTop:80,
},
button:{
height:90,
justifyContent:"center",
alignSelf:"center",
}
});
AppRegistry.registerComponent('gradient', () => ModalStack);