React-Native Navigator

react-native-router-flux 

Install  $npm i react-native-router-flux --save

https://github.com/aksonov/react-native-router-flux

기본 Navigator는 원하는 기능이 아직 지원하지 않는다. 

그래서 선택한 Navigator 사용하기도 편하다는 장점이 있다. 

단점 : 

ActionBar의 사이즈 아래에 Content를 만들어야 한다. MarginTop android: 53, IOS : 64

예)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

import React, {Component} from 'react'; import {   AppRegistry,   Platform, } from 'react-native';   import {  Router, Scene } from 'react-native-router-flux';   import SplashScreen from './src/SplashScreen'; import HomeScreen from './src/HomeScreen';   class Index extends Component {     render() {     return(       <router>         <scene key="root">           <scene key="splash" component="{SplashScreen}" title="Splash" initial="{true}" hidenavbar="{true}">               <scene key="home" component="{HomeScreen}" title="Home" type="replace" scenestyle="{{paddingTop:" (platform.os="==" 'android'?="" 54:="" 64)}}="">           </scene>       </scene></scene></router>     );   } }   AppRegistry.registerComponent('TestProject', () => Index);

SplashScreen에서 Navigator를 안보이도록 hideNavBar={true}

이동되는 HomeScreen을 Navigator의 처음으로 설정 type="replace"

SplashScreen에서 Home화면으로 이동 시 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import React, {Component} from 'react'; import {   View,   Text,   StyleSheet, } from 'react-native';   import { Actions } from 'react-native-router-flux'; // New code   class SplashScreen extends Component {     render() {     return(         <view style="{styles.container}">           <text style="{styles.text}" onpress="{()=">Actions.home()}>               This is Splash Screen!!!           </text>         </view>     );   } }

기타 자세한 내용은 https://github.com/aksonov/react-native-router-flux