React Native 페이지 점프, 전송 및 콜백

어서 오세요.
선언:
나는 조용한 iOS 프로그래머였는데, 그 달은 어두웠고, 회사 5층에는 나와 매니저 두 사람만 있었고, 나는 영화 《 사적 》 을 보고 있었다.갑자기 누군가가 내 어깨를 만지는 것 같아서 갑자기 국화가 팽팽해지더니 갑자기 고개를 돌렸다. 그래, 사장인 줄 알았어.저를 찾아가서 한 무더기 말했는데 대체로 앞으로 리액트 네이티브로 iOS와 안드로이드를 개발해 보려고 했습니다. 제가 좀 싫었지만 누가 저를 동생이라고 했겠어요. 이 공부를 시작할 수밖에 없었어요.자, 잡담은 끝났고, 다음은 주제로 들어갑니다. 오늘 이야기할 것은 바로 React Native 페이지의 이동, 전가와 리셋입니다.
본문:
참고:

코드는 ES6 문법입니다. 모르면 여기에서 완 선생님의 ES6 입문을 볼 수 있습니다. 그리고 이 ES5, ES6 쓰기 대조도 볼 수 있습니다.

저는 오늘 자이언트의 어깨 위에 서서 좀 더 깊이 있게 분석해 보겠습니다. 이 일지는 초보자가 Navigator를 이해하는 강좌를 바탕으로 설명합니다. 만약에 여러분이 이 일지를 이해하신다면 제가 말한 것은 보지 마세요. 여러분의 시간을 낭비하고 우리는 정수만 이야기합니다.

는 모두 세 개의 js 파일, SampleComponent.js 등록 프로그램 입구, FirstPageComponent.js 페이지 1, SecondPageComponent.js 페이지 2와 관련된다.

Let's do it
먼저 다음 코드를 분석합니다: SampleComponent.js

import React from 'react';
import {
    View,
    Navigator, 
    AppRegistry
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SampleComponent extends React.Component { 
   render() {
       let defaultName = 'FirstPageComponent'; 
       let defaultComponent = FirstPageComponent;
    return (
         {
                return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
              }}
            renderScene={(route, navigator) => {
                let Component = route.component;
                //       routes.params     key  props     ，        this. props.id  
                //navigator              
                return 
              }}
        />
    );
  }
}

FirstPageComponent.js:

//FirstPageComponent.js
import React from 'react';
import {
    View,
    Navigator
} from 'react-native';

import SecondPageComponent from './SecondPageComponent';

export default class FirstPageComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            id: 2,
            user: null,
        }
    }

    _pressButton() {
        let _this = this;
        const { navigator } = this.props;
    //          props.navigator?    :
    //
    //     navigator  props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
    //        params      
                        : { JSON.stringify(this.state.user) }
                
            );
        }else {
            return(
                
                    
                          ID { this.state.id }     
                    
                
            );
        }
    }
}

SecondPageComponent.js:

const USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '    ', age: 25 }
};

import React from 'react';
import {
    View,
    Navigator
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            id: null
        }
    }

    componentDidMount() {
        //     FirstPageComponent       : id
        this.setState({
            id: this.props.id
        });
    }

    _pressButton() {
            const { navigator } = this.props;
            
            if(this.props.getUser) {
                let user = USER_MODELS[this.props.id];
    //         
                this.props.getUser(user);
            }
                
            if(navigator) {
    //  ，      
                navigator.pop();
            }
    }

    render() {
        return(
            
                     : id={ this.state.id }
                
                         
                
            
        );
    }
}