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

Posted by 천류성
이전버튼 1 2 3 이전버튼

블로그 이미지
.....
천류성

태그목록

공지사항

Yesterday23
Today49
Total15,398

달력

 « |  » 2018.08
      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 28 29 30 31  

최근에 달린 댓글

최근에 받은 트랙백

글 보관함


티스토리 툴바