我正在尝试像这样集成 StackNavigator、TabNavigator 和 DrawerNavigator:
class TestApp extends Component {
render() {
return (
<MyApp />
);
}
}
const Tabs = TabNavigator({
Home1: { screen:Home1 },
Home2: { screen:Home2 },
},
{
tabBarPosition: 'bottom',
});
const Drawer = DrawerNavigator({
First:{
screen: DrawerScreen1
},
Second:{
screen: DrawerScreen2
}
},{
initialRouteName:'First',
drawerPosition: 'left'
});
const MyApp = StackNavigator({
Screen1: {screen:Screen1},
Screen2: {screen:Screen2},
Tabs: {
screen: Tabs
},
Drawer:{
screen: Drawer
}
}, {
initialRouteName: "Tabs"
});
AppRegistry.registerComponent('TestApp', () => TestApp);
调用抽屉:
<Button
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="Show Drawer"
/>
它不会打开抽屉。它打开DrawerScreen1
就像我从StackNavigator
. 它使用后退按钮打开组件。我想打开抽屉。
抽屉屏幕1:
export default class DrawerScreen1 extends Component{
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./myImage.png')}
style={height:100, width: 100}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="DrawerOpen"
/>
);
}
}
DrawerScreen2 类似。我错过了什么?请帮忙。