리액트네이티브 react-native-navigation V2 LifeCycle #4

componentDidAppear, componentDidDisappear 는 component가 나타나고 사라질때 호출되는  React Native Navigation LifeCycle 콜백메서드이다.  (Navigation.events().bindComponent(this) 사용되어진 뒤에 )

React의 componentDidMount, componentWillUnmount 마찬가지로 다른 점은 사용자가 실제로 마운트되어 있는지 여부뿐만 아니라 문제의 구성 요소를 실제로 볼 수 있는지 여부를 나타낸다. React Native Navigation 성능을 최적화하는 방식 때문에, 컴포넌트는 실제로 레이아웃의 일부분으로 탑재되지만, 항상 보이지는 않는다.(예를 들어 다른 화면이 그위에 푸쉬된경우 )

이들을 사용하려면 다른 React LifeCycle 함수와 같이 구성요소에 구현하기 만하면 모든 기능을 자동으로 호출하는 탐색 이벤트 모듈에 화면을 바인딩 한다.

 ScreenLifeCycle 예제 

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {Navigation} from "react-native-navigation";
 
class SignIn extends Component {
 
    constructor(props) {
        super(props);
        Navigation.events().bindComponent(this);
        this.state = {
          text: 'nothing yet'
        };
      }
 
      componentDidAppear() {
        alert('componentDidAppear');        
      }
    
      componentDidDisappear() {
       alert('componentDidDisappear');
      }
 
    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]

[실행화면]

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