반응성 항법 실험 예시?

반응성 항법 실험 예시?

나는 몇 주 전부터 리액티브를 사용하기 시작했다.첫 번째 앱에서는 네비게이터를 네비게이터 바 구성요소와 함께 사용하여 제목과 왼쪽/오른쪽 단추를 표시했다.페이스북을 읽으면 내비게이션에 대한 지원이 끊기고 내비게이션 실험이나 내비게이션 rfc(짧게 하려면 'NavExp'라고 부른다)를 개발한 후, 나는 NavExp를 이용하려고 한다.하지만 나는 그것을 이해할 수 없다.

앱 메뉴: Android용 DrawLayout, IOS용 TabIOS.그리고 내용에 따라 제목과 오른쪽(내용별 메뉴 - 인쇄, 복사)/왼쪽(메뉴의 경우) 버튼을 표시할 수 있는 네비바를 갖게 된다.

1. 네비게이터와 NavExp의 차이점은 무엇인가?(환원형 또는 플럭스형 항법 기능을 제공하지만, 또한 이해할 수 없다고 한다)
2. 환원제의 용도는 무엇인가?(어느 것을 사용할 것인가? (스택, 찾기)
3. NavigationRootContainer?
4. 상수인데 내 모든 주를 어디에다 선포할 것인가?
5. 행동과 주의 차이는 무엇인가?
6. 네비게이터의 경우 NavExp에서 장면을 실제로 렌더Scene 기능으로 렌더링했다.

하나의 SO 질문으로 풀기에는 너무 많은 양이 있으므로, 조사를 한 다음 이 질문을 몇 개의 작은 질문으로 나누는 것이 더 나을 것이다.시작하기 위한 몇 가지 조언이 있다.

전체:새로운 NavigationExperimental의 목적은 Resact Native를 위한 상태 비저장 항법 구조를 만드는 것이다.이전 네비게이터 구성요소는 새로운 NavExp보다 상태 유지와 변종에 더 의존했다.리액션이 소품 세트를 가져간 다음 변경될 때마다 완전히 새로운 UI를 제공하는 방법을 생각한다면, 새로운 NavExpans는 그것을 조금 더 용이하게 하기 위한 것이다.

이는 애플리케이션에서 상태를 관리하기 위해 플럭스 유사 패턴을 사용할 때 훨씬 더 유용하기 때문이다.나는 플럭스(Flux) 또는 내 생각에 패턴의 Redex 구현을 더 쉽게 파악할 수 있는 방법을 제안한다.

그것은 1번 정도로 답하고, 당신은 그 링크를 거쳐서 2번으로 답하는 것을 더 잘 이해할 수 있을 것이다.

3. NavigationRootContainer는 NavExp를 사용할 때 구조와 기능의 일부를 제공하는 유용한 요소(필요하지는 않지만)이다.페이스북의 예들은 그것을 이용한다.Redex와 같은 것으로 NavExp를 구현하는 경우, Reducer의 사용을 복제하기 때문에 NavExp를 사용할 필요가 없다.

4. 적절한 장면/카드/스크린을 제작하기로 결정할 때 주(州)에 대해 이야기하고 있다고 가정한다.이것들은 어디에나 선언될 수 있고, 정말로 끈일 뿐이다.아무데서나 신고할 필요조차 없다.

5. 상태는 응용 프로그램의 움직이는 부분을 구성하는 데이터와 변수의 모음입니다.예를 들어, 쇼핑 카트 앱이 있는 경우 고객의 이름과 카트의 내용을 앱의 상태에 저장하며, 고객이 현재 어떤 화면에 있는지, 이전에 어떤 스크린에 있는지 등을 확인하십시오.변화할 수 있는 것은 무엇이든지 주체가 된다.

행동은 당신의 어플리케이션의 다른 부분들에 무언가가 변했다는 것을 알리기 위해 하늘을 향해 조명탄을 쏘는 것과 같다.사용자가 카트에 새 항목을 추가하시겠습니까?보내기ITEM_ADDED_TO_CART항목의 ID와 함께 수행.사용자가 기본 화면으로 버튼을 누르시겠습니까?보내기 aNAVIGATE_TO_SCREEN홈 스크린의 식별자와 함께 동작.조치는 환원기에 의해 처리되고 환원기는 상태를 변경한 다음 Resact Native에게 모든 것을 다시 렌더링하도록 지시한다.

6. 이것은 질문으로 형성된 것이 아니라, 여러분은renderScene거의 동일한 방식으로 기능하는 NavExp과 함께 하는 방법: 그것은 무엇이든지 화면의 내용을 뱉어낸다.

(FYI, 나는 이것에 대해 공식적인 언급은 없지만, 이미 네비게이터에 익숙하고 그것을 실행했다면, 당신은 아마도 네비게이티브를 이용하기 위해 당신의 앱을 다시 쓰는 대신에 가까운 미래에 그것을 계속하는 것이 괜찮을 것이다.)

여기에서 얻은 의견을 바탕으로 NavigationExpertmiental: https://github.com/facebook/react-native/issues/6184을 사용하십시오.

시작하기에 좋은 예가 있다: https://github.com/thebakeryio/react-native-complex-nav

import { View, NavigationExperimental } from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import { connect } from 'react-redux';
import ApplicationTabs from '../ApplicationTabs';
import NewItem from '../NewItem';
const { CardStack: NavigationCardStack } = NavigationExperimental;

class GlobalNavigation extends Component {
    render() {
        return (
            <NavigationCardStack
                direction={'vertical'}
                navigationState={this.props.navigation}
                onNavigate={this.props.onNavigate}
                renderScene={this._renderScene.bind(this)}
                renderOverlay={this._renderHeader.bind(this)}
                style={styles.main}
            />
        );
    }

    _renderHeader(props) {
        return null;
    }

    _renderScene(props) {
        if (props.scene.navigationState.key === 'applicationTabs') {
            return (
                <View style={{flex: 1}}>
                    <ApplicationTabs />
                </View>
            );
        }

        if (props.scene.navigationState.key === 'new') {
            return (
                <View style={{flex: 1}}>
                    <NewItem onClose={this._onCloseNewItem.bind(this)} />
                </View>
            );
        }
    }

    _renderTitleComponent(props) {
        return null;
    }

    _onCloseNewItem() {
        this.props.onNavigate({
            type: 'BackAction'
        });
    }
}

function mapDispatchToProps(dispatch) {
    return {
        dispatch
    };
}

function mapStateToProps(state) {
    return {
        navigation: state.get('globalNavigation')
    };
}

export default connect(mapStateToProps, mapDispatchToProps, (stateProps, dispatchProps, ownProps) => {
    return Object.assign({}, dispatchProps, stateProps, {
        onNavigate: (action) => {
            dispatchProps.dispatch(
                Object.assign(action, {
                    scope: stateProps.navigation.key
                })
            );
        }
    });
})(GlobalNavigation);

참조URL: https://stackoverflow.com/questions/36758521/react-native-navigation-experimental-example