Мне любопытно, правильно ли я построил структуру своего приложения или полностью ошибался.
Это то, что у меня есть в моем routes.js
:
render() {
if (!this.state.isReady)
return <Splash/>
return (
<Router>
<Scene key="root" hideNavBar navigationBarStyle={{backgroundColor: "#fff"}} backButtonTintColor={color.black}>
<Stack key="Auth" initial={!this.state.isLoggedIn}>
<Scene key="Login" hideNavBar component={Login} title="Login"/>
</Stack>
<Stack key="Main" initial={this.state.isLoggedIn}>
<Scene key="DrawNav" drawer hideNavBar component={DrawNav} title={"Home"} type = {ActionConst.REPLACE}/>
<Scene key="Home" hideNavBar component={Home} title={"Home"}/>
<Scene key="itemDescription" hideNavBar component={itemDescription} title="Item Description" back/>
</Stack>
</Scene>
</Router>
)
}
Теперь это может показаться странным, но я решил использовать DrawerNavigator
для определения моего DrawNav
компонента следующим образом:
const styles = StyleSheet.create({
container:{
flex:1
},
itemContainer:{
marginTop:20
},
button:{
backgroundColor:color.blue,
borderRadius: 4
}
});
//Edit drawer layout here
const CustomDrawerContentComponent = (props) => (
<View style = {styles.container}>
<View style = {styles.itemContainer}>
<DrawerItems {...props}/>
</View>
<Button title="Logout" onPress={props.screenProps} buttonStyle={styles.button}/>
</View>
);
const Drawer = DrawerNavigator({
Home: {
screen: Home
},
About: {
screen: aboutScreen
},
Setting:{
screen: settingScreen
},
},
{
initialRouteName: 'Home',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
}
);
class DrawNav extends React.Component{
constructor(){
super();
this.onSignOut = this.onSignOut.bind(this);
}
onSuccess() {
this.props.actionsHome.successSignOut();
Actions.reset("Auth");
}
onError(error) {
Alert.alert('Oops!', error.message);
}
onSignOut() {
this.props.actionsAuth.signOut(this.onSuccess.bind(this),this.onError.bind(this))
}
render(){
return <Drawer screenProps = {this.onSignOut}/>;
}
}
export default connect(null, mapDispatchToProps) (DrawNav);
Но теперь я начинаю сомневаться в том, что я здесь сделал, проблема в том, что если я скажу, что хочу сделать несколько <Stacks>
, содержащих несколько <Scenes>
, как в моем routes.js
:
<Stack key="main">
<Scene key="DrawNav">
<Stack key="HomeStack">
<Scene key="Home">
<Scene key="ItemDescription">
<Stack key="OrderStack">
<Scene key="Orders">
<Scene key="AddOrders">
Мне нужно было бы как-то поместить HomeStack
и OrderStack
в DrawNav
.
Я делаю что-то, чего не должен был здесь?
Как лучше структурировать сотрудничество между RNRF
и DrawerNavigator
, чтобы достичь того, что я описал выше?