리액트네이티브 react-native-navigation v2 Root Screen #2

react-native-navigation 줄여서 RNN을 이용하여 UI를 화면에 표시해보자 

먼저 리액트네이티브 react-native-navigation 개발환경 설정 을 통해서 프로젝트를 생성하고 RNN을 사용하기 위한 설정이 필요하다 .

// /** @format */
 
// import {AppRegistry} from 'react-native';
// import App from './App';
// import {name as appName} from './app.json';
 
// AppRegistry.registerComponent(appName, () => App);
 
 
import {Navigation} from 'react-native-navigation';
 
import Welcome from './Welcome';
 
Navigation.registerComponent('Welcome', ()=>Welcome );
 
Navigation.events().registerAppLaunchedListener(()=>{
    Navigation.setRoot({
        root: {
            component: {
                name: 'Welcome'
            }
        }
    })
});

[index.js]

index.js 에서 프로젝트 생성시 자동으로 생성되는 1~7번째 라인 구문을 주석처리한다. 10번째 줄에 react-native-navigation에있는  Navigation 객체를 import 하였다.  12번째 줄에 Welcome.js 파일을 import 하였다.

14번째 라인에 Navigation 객체에 registerComponet메서드를 이용하여 페이지를 등록하였고, 16번째 라인에 Navigation.events().registerAppLaunchedListenerI() 메서드를 이용하여 root 화면을 등록하였다.

Navigation.events().registerAppLaunchedListener(() => {

});

앱이 실행되면 onAppLaunched 이벤트가 실행된다. 이 이벤트는  애플리케이션 레이아웃이 초기화될때 사용된다. 

registerComponent(screenID, generator)

앱에서 사용할화면 구성요소를 등록하며, screenID는 고유한 이름으로 등록되어야 한다. (중복되면안됨) generator 에 경우는 React.Component 또는 React.PureComponent를 확장하는 일반적인 React구성요소가 올 수 있다. 

registerAppLaunchedListener(callback)

앱이 실행되면 registerAppLaunchedListener 이벤트가 호출된다. 

Navigation객체의 setRoot 명령을 통해서 원하는 레이아웃으로 앱을 초기화 할 수 있다. root에 컴포넌트 이름으로 해당React 요소를 로딩한다. 

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";
 
 
class WelcomScreen extends Component {
    render() {
 
        return (
            <View style={styles.container}>
                <Text>WelcomeScreen</Text>
            </View>
        );
    }
}

 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        alignItems: 'center',
        justifyContent : 'center'
    }
});

export default WelcomScreen;

[Welcome.js]

React.Component 상속하여 Welcome 화면을 만들었다.

react-native run-ios 명령어를 이용하여 실행해본다.

참고 : https://wix.github.io/react-native-navigation/#/docs/Usage?id=the-basics