这是顶级抽屉导航。
import React ,{Component} from 'react'
import { addNavigationHelpers } from 'react-navigation';
import {DrawerNavigator} from 'react-navigation'
import {connect} from 'react-redux'
import DevicesPage from '../page/DevicesPage'
import HomeStackNavigation from './HomeStackNavigation'
import ServerPage from '../page/ServerPage'
import DrawerPage from '../page/DrawerPage'
const {width,height} = Dimensions.get('window');
const mapStateToProps = (state)=>({
drawerNav : state.DrawerNavReducer
});
class DrawerNavigation extends Component{
render(){
return(
<Drawer
navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state : this.props.drawerNav
})}
/>
);
}
}
export const Drawer = DrawerNavigator({
Home:{
screen : HomeStackNavigation
},
Devices:{
screen : DevicesPage
},
Server:{
screen : ServerPage
}
},{
initialRouteName:'Home',
drawerWidth: width - 100,
drawerPosition: 'left',
contentComponent: props =><DrawerPage {...props}/>
})
export default connect(mapStateToProps)(DrawerNavigation);
这是我的堆栈导航器,它是抽屉导航器的第一项。
import React,{Component} from 'react';
import {
View
} from 'react-native'
import {StackNavigator} from 'react-navigation';
import {addNavigationHelpers } from 'react-navigation';
import {connect} from 'react-redux';
import HomePage from '../page/HomePage'
class HomeStackNavigation extends Component{
render(){
return(
<StackNavigation navigation={
addNavigationHelpers({
dispatch: this.props.dispatch,
state : this.props.nav,
})}/>);
}
}
export const StackNavigation = StackNavigator({
Home:{
screen:HomePage
}
},{
initialRouteName : 'Home',
initialRouteParams : {
chartType : 'BarChart'
}
})
const mapStateToProps = (state)=>{
return({
nav : state.HomeStackNavReducer,
});
}
export default connect(mapStateToProps)(test);
当我第一次进入测试视图时,它是一个路由器,键是'init'。当我打开抽屉时,单击第一个项目。它将添加一个新的路由器。最后它会出现一个红色的屏幕。这是因为我需要在初始化路由器中使用一些参数而不是新路由器。那你可以帮我吗 这是第一个进入页面