использование response-native-router-flux вместе с DrawerNavigator - PullRequest
0 голосов
/ 11 мая 2018

Мне любопытно, правильно ли я построил структуру своего приложения или полностью ошибался. Это то, что у меня есть в моем 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, чтобы достичь того, что я описал выше?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...