리액트네이티브 react-native-navigation V2 StackNavigator #3

 
import {Navigation} from 'react-native-navigation';
import Welcome from './src/Welcome';
import SignIn from './src/SignIn';
import SignUp from './src/SignUp';
 
 
 
Navigation.registerComponent('Welcome', ()=>Welcome );
Navigation.registerComponent('SignIn', ()=>SignIn );
Navigation.registerComponent('SignUp', ()=>SignUp );
 
Navigation.events().registerAppLaunchedListener(()=>{
    Navigation.setRoot({
        root: {
            stack : {
                id:'AppStack',
                children : [
                    {
                        component : {
                            name: 'Welcome',
                            options:{
                                topBar : {
                                    title:
                                    {
                                        text: 'Welcome'
                                    }     
                                }
                                
                            }
                        },
                    }
                ]
            }
        }
    })
});

[index.js]

index.js 파일을 root: 부분에 statck 항목을 추가한다. 

Navigation.setRoot() 함수는 탭 또는 스택 또는 이 두 가지의 조합과 같은 모든 종류의 레이아웃에 대한 속성을 받는다.

stack 은 RNN (react-native-navigation) 에서 레이아웃의 한종류이다. 

자식 레이아웃을 지원한다. stack은 둘 이상의 화면으로 초기화 될수 있고 마지막 화면이 스택 맨위에 표시된다.

const stack = {

  children: [

    {

      component: {}

    },

    {

      component: {}

    }

  ],

  options: {}

}

Welcome.js 파일을 아래와 같이 수정한다.

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {Navigation} from "react-native-navigation";
 
 
class WelcomScreen extends Component {
 
    goToScreen = (screenName) => {
        Navigation.push(this.props.componentId,{
            component : {
                name: screenName
            }
        })
    }
 
    render() {
 
        return (
            <View style={styles.container}>
                <Button title='Sign In' onPress={()=> this.goToScreen('SignIn')} />
                <Button title='Sign Up' onPress={()=> this.goToScreen('SignUp')} />
            </View>
        );
    }
}
 
 
export default WelcomScreen;
 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        alignItems: 'center',
        justifyContent : 'center'
    }
});

[Welcome.js]

push(componentId, layout)

Navigation Stack에서 새로운 화면을 추가할때 사용하는 메서드이다.

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {Navigation} from "react-native-navigation";
 
class SignIn extends Component {   
 
    render() {
 
        return (
            <View style={styles.container}>
                <Text>SignIn</Text>
            </View>
        );
    }
}
 
 
export default SignIn;
 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        alignItems: 'center',
        justifyContent : 'center'
    }
});

[SignIn.js]

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
 
 
class SignUp extends Component {
    render() {
 
        return (
            <View style={styles.container}>
                <Text>SignUp</Text>
            </View>
        );
    }
}
 
 
export default SignUp;
 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        alignItems: 'center',
        justifyContent : 'center'
    }
});

[SignUp.js]