Question

我很好奇我是否正确构建了我的应用程序结构或完全错误。这是我目前在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之间的协作以实现上述目标？

使用react-native-router-flux和DrawerNavigator

0 个答案: