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

예)

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(
      
        
          

            
          
      
    );
  }
}

AppRegistry.registerComponent('TestProject', () => Index);

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

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

SplashScreen에서 Home화면으로 이동 시 

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(
        
          Actions.home()}>
              This is Splash Screen!!!
          
        
    );
  }
}

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