react-native-router-flux

이번에는 react-native-router-flux 라는 모듈을 사용을 해보도록 하겠습니다.

react-native-router-flux 공식 Github 을 참고 해주시길 바랍니다.

이 모듈은 react-native에서 귀찮은 router 작업을 편하게 해줍니다 + Drawer Layout, Tabs 등 router에 필요한 UI들도 지원을 해줍니다.

하지만 제가 이 module을 사용하는 가장 큰 이유는 전체적인 화면구성을 쉽게 알 수 있다는 점입니다.

공식Github에 있는 Example을 clone을 한 다음 실행을 시켜보죠.

            <Scene key="modal" component={Modal} >
                <Scene key="root" hideNavBar hideTabBar>
                    <Scene key="echo" clone component={EchoView} getTitle={(navState) => navState.key} />
                    <Scene key="switcher" component={Switch} selector={(props) => {
                        return 'text1';
                    }}>
                        <Scene key="text1" text="text1" component={(props) => <SwitcherPage {...props} text={currentSwitchPage} />} />
                        <Scene key="text2" text="text2" component={(props) => <SwitcherPage {...props} text={currentSwitchPage} />} />
                    </Scene>
                    <Scene key="register" component={Register} title="Register"/>
                    <Scene key="register2" component={Register} title="Register2" duration={1}/>
                    <Scene key="home" component={Home} title="Replace" type="replace"/>
                    <Scene key="launch" component={Launch} title="Launch" initial={true} />
                    <Scene key="login" direction="vertical"  >
                        <Scene key="loginModal" component={Login} title="Login"/>
                        <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
                    </Scene>
                    <Scene key="tabbar" component={NavigationDrawer}>
                        <Scene key="main" tabs={true} >
                            <Scene key="tab1"  title="Tab #1" icon={TabIcon} navigationBarStyle={{backgroundColor:"red"}} titleStyle={{color:"white"}}>
                                <Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />
                                <Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
                            </Scene>
                            <Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
                                <Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
                                <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
                            </Scene>
                            <Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
                            <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
                            <Scene key="tab5" component={TabView} title="Tab #5" hideTabBar={true} hideNavBar={true} icon={TabIcon}/>
                        </Scene>
                    </Scene>
                </Scene>
                <Scene key="error" component={Error}/>
            </Scene>

Example.js 파일을 보면 이런부분이 render안에 있습니다. 한개한개의 Scene이 component와 key에 의해 정의 되고 있습니다.

우리는 이 파일만 보더라도 어떤식으로 화면 구조가 되어있는지 알 수 있습니다. 자세한 설명법은 공식 Github을 참고해 주세요.