React Native Navigation V2 - Simple Blog - 1, Navigation.showModal

React Native 프로젝트 생성후 React Native Navigation V2 환경설정을 한다.

환경설정 링크 클릭

npm i react-native-ui-lib 명령어로 해당 라이브러리 설치한다.

import {Navigation} from 'react-native-navigation';
import PostList from './src/PostList';
import AddPost from './src/AddPost';
 
 
Navigation.registerComponent('blog.PostList', ()=>PostList );
Navigation.registerComponent('blog.AddPost', ()=>AddPost );
 
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [
            {
              component: {
                name: 'blog.PostList',
                options: {
                  topBar: {
                    title: {
                      text: 'Blog'
                    }
                  }
                }
              }
            }
          ],
        }
      }
    });
  });
  

[index.js]

PostList 화면과 AddPost 화면을 두개를 먼저 작성해보자.

Navigation.registerComponent, Navigatio.setRoot 메서드를 이용하여 화면을 등록하고 root 화면은 PostList 컴포넌트를 등록한다. 

import React, { Component } from 'react';
import {View, Text} from 'react-native-ui-lib';
import PropTypes from 'prop-types';
import { Navigation } from 'react-native-navigation';
 
class PostList extends Component {
 
  static propTypes = {
    navigator : PropTypes.object,
    componentId : PropTypes.string
  }
 
  static get options() {
    return {
      topBar: {
        rightButtons: [
          {
            id: 'addPost',
            text: 'Add'
          }
        ]
      }
    };
  }
 
  constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
  }
 
 
  navigationButtonPressed({buttonId}) {
    if (buttonId === 'addPost') {
      this.showAddPostModal();
    }
  }
 
  showAddPostModal() {
    Navigation.showModal({
      stack: {
        children: [{
          component: {
            name: 'blog.AddPost',
          }
        }]
      }
    });
  }  
 
  render() {
      return (
        <View flex center bg-blue60>
          <Text onPress={this.pushViewPostScreen}>Posts List Screen</Text>
        </View>
      );
    }
    
}
 
export default PostList;

[PostList.js]

get options 메서드를 이용하여 Navigator 에 동작과 모양을 설정할 수 있고, index.js 또는 레이아웃을 호출하는 로직에서 레이아웃 계층을 이용하여 Navigator 동작이나 레이아웃을 정의할 수도 있다.

top Bar 속성을을 이용하여 right버튼에 Add 텍스트를 설정하고, Navigation 이벤트 객체를 선언한뒤에 rightButton 터치할경우 Navigation.showModal 이용하여 AddPost 화면을 호출한다.

import React, { Component } from 'react';
import {View, Text, TextField} from 'react-native-ui-lib';
import {Navigation} from 'react-native-navigation';
import PropTypes from 'prop-types';
 
 class AddPost extends Component {
 
    static propTypes = {
        componentId:PropTypes.string
    }
 
    static get options() {
        return {
          topBar: {
            title: {
              text: 'Add Post'
            },
            rightButtons: [{
              id: 'saveBtn',
              text: 'Save',
              enabled: false
            }],
            leftButtons: [{
              id: 'cancelBtn',
              text: 'Cancel'
            }]
          }
        };
      }
 
    constructor(props) {
        super(props);
        Navigation.events().bindComponent(this);
        this.onChangeText = this.onChangeText.bind(this);
    }
 
    navigationButtonPressed({buttonId}) {
        if (buttonId === 'cancelBtn') {
          Navigation.dismissModal(this.props.componentId);
        } else if (buttonId === 'saveBtn') {
          alert('saveBtn');
        }
      }
    
      onChangeText(text) {
        Navigation.mergeOptions(this.props.componentId, {
          topBar: {
            rightButtons: [{
              id: 'saveBtn',
              text: 'Save',
              enabled: !!text
            }]
          }
        });
      }
    
 
      render() {
        return (
          <View flex center bg-green60>
            <TextField
              placeholder="Start writing to enable the save btn"
              onChangeText={this.onChangeText}
              hideUnderline
            />
          </View>
        );
      }
    
}
 
export default AddPost;
 

[AddPost.js]

Add Post화면에서 left, right 버튼을 생성하고 (12~29) navigationButtonPressed 메서드를 이용하여 해당버튼을 이벤트를 개치하여 로직을 처리한다. 이때 button에 id속성으로 버튼 눌러졌는지를 구별한다. Navigation.dismissModal(this.props.componentId) 이용하여 호출된 모달 화면을 종료시킨다. 

https://wix.github.io/react-native-navigation/#/docs/screen-api?id=showmodallayout-

원문출처  링크클릭