我创建了一个具有两个屏幕的堆栈导航器:
然后我创建了Drawer导航器,并在其中嵌套了堆栈导航器,并将其命名为Home1
。
抽屉导航器屏幕:
尽管我可以从堆栈和抽屉中导航到通知屏幕 但它没有按预期工作。
什么不起作用:
问题: 我只想使用两个不同的导航器导航到特定屏幕。
import React, {Component} from "react";
import { View, Text,Button, StyleSheet } from "react-native";
import { createStackNavigator,createDrawerNavigator, createAppContainer } from "react-navigation";
import Icon from 'react-native-vector-icons/FontAwesome'
class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'lala',
drawerIcon: () => (
<Icon name="bars" size={32} color="black" />
),
};
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
title: 'From Stack Navigator',
drawerIcon: () => (
<Icon name="bars" size={32} color="black" />
),
};
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
</View>
);
}
}
const StackContainer = createStackNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
},
{
defaultNavigationOptions: {
title:'Nav Are AmaZing',
headerLeft:<Icon name="bars" size={32} color="white" />,
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
)
const MyDrawerNavigator = createDrawerNavigator({
Home1:{screen: StackContainer,
navigationOptions : {
drawerLabel: 'Home',
title: 'Navigation',
drawerIcon: () => (
<Icon name="bars" size={32} color="black" />
),
}},
Notifications: {
screen: MyNotificationsScreen,
navigationOptions : {
drawerLabel: 'Notifications',
title: 'From Drawer',
drawerIcon: () => (
<Icon name="bars" size={32} color="black" />
),
}
},
},
);
const AppContainer = createAppContainer(MyDrawerNavigator);
export default class App extends Component{
render(){
return (
<AppContainer/>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff',
justifyContent:"center",
alignItems:'center'
}
})