[React Native] react-native-navigation 화면넘기기

React Native + react-native-navigation 화면넘기기

패키지 구조(src 아래)

Reference

• https://github.com/wix/react-native-navigation/tree/v2/playground/src

• https://wix.github.io/react-native-navigation/#/docs/screen-api

간단히 Component를 쌓고 지우는 메소드 두개만! 이거 외에도 더있다(2번째 레퍼런스 확인)

먼저, Components가 Stack으로 쌓이는 개념

push() -> 새 Component를 쌓음

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen',
    passProps: {
      text: 'Pushed screen'
    },
    options: {
      topBar: {
        title: {
          text: 'Pushed screen title'
        }
      }
    }
  }
});

Pop() -> 현재 Component pop하고 이전 Component로

Navigation.pop(this.props.componentId);

간단히 두 페이지 작성하고 넘기고 뒤로 돌아가는 예제를 작성해보았다.

1. WelcomPage.js 작성

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
​
import React, {Component} from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
const { Navigation } = require('react-native-navigation');
​
class WelcomePage extends Component<Props> {
​
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>Click This Button</Text>
                <Button title="Click" onPress={()=>{this._push()}}/>
            </View>
        );
    }
​
    _push=()=>{
            Navigation.push(this.props.componentId, {
                component: {
                    name: 'navigation.test.second',
                    passProps: {
                        text: 'SecondScreen'
                    },
                    options: {
                        topBar: {
                            title: {
                                text: 'SecondScreen'
                            }
                        }
                    }
                }
            });
    }
}
​
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
​
module.exports= WelcomePage;

자세히 들여다보면,

버튼 클릭 시,

  <Button title="Click" onPress={()=>{this._push()}}/>

navigation.test.second 로 이동, title은 SecondScreen

  _push=()=>{
            Navigation.push(this.props.componentId, {
                component: {
                    name: 'navigation.test.second',
                    passProps: {
                        text: 'SecondScreen'
                    },
                    options: {
                        topBar: {
                            title: {
                                text: 'SecondScreen'
                            }
                        }
                    }
                }
            });
    }

2. SecondPage.js 작성

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
​
import React, {Component} from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
const { Navigation } = require('react-native-navigation');
​
type Props = {};
​
​
 class SecondPage extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>This is Second Page</Text>
                <Text style={styles.instructions}>Click This Button</Text>
                <Button title="Back" onPress={()=>{this._pop()}}/>
            </View>
        );
    }
​
    _pop=() =>{
        Navigation.pop(this.props.componentId);
    }
}
​
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
​
module.exports=SecondPage;

버튼 클릭 시,

 <Button title="Back" onPress={()=>{this._pop()}}/>

현재 Component pop(=WelcomePage로 이동)

 _pop=() =>{
     Navigation.pop(this.props.componentId);
 }

3. 앞의 두 페이지를 등록하는 함수 작성 - src/screens/index.js

const { Navigation } = require('react-native-navigation');
const WelcomeScreen = require('./WelcomePage');
const SecondScreen= require('./SecondPage')
​
​
function registerScreens() {
    Navigation.registerComponent('navigation.test.welcome', ()=>WelcomeScreen);
    Navigation.registerComponent('navigation.test.second',()=>SecondScreen);
​
}
​
​
module.exports= {registerScreens};

WelcomePage.js 는 'navigation.test.welcome' 로,

SecondScreen.js 는 'navigation.test.second' 등록하는 메소드 작성 후 모듈 등록

4. 프로그램 실행 시, 3번의 registerScreens 실행 후, root Component 등록하는 함수 작성 - 프로젝트/App.js

​
const { Navigation } = require('react-native-navigation');
const { registerScreens } = require('./src/screens');
​
​
function start(){
  registerScreens();
    Navigation.setRoot({
        root: {
            stack: {
                id: 'TEST',
                children: [
                    {
                        component: {
                            name: 'navigation.test.welcome'
                        }
                    }
                ]
            }
        }
    });
}
​
module.exports={
  start
};

'navigation.test.welcome' 을 root Compoent로 설정

5. 4번의 start 메소드를 프로그램 시작 시 실행되도록 설정 - 프로젝트/index.js(src/screens/index.js 아님)

const { start } = require('./App');
start();

6. react-native run-android