2017. 6. 14. 00:13 Computer/React-Native
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