React-native 导航实验示例？

Question

几周前我开始使用 react-native。对于我的第一个应用程序，我使用 navigator 进行导航，并使用其 navigationbar 组件来显示标题和左侧/右侧按钮。在阅读 facebook 已放弃对导航器的支持 并开发 navigation experimental 或 navigation-rfc（将调用 'NavExp'让它简短），我正在尝试使用 NavExp。但我无法理解它。

应用程序菜单：安卓版 DrawerLayout，IOS 版 TabIOS。并且将有导航栏来显示标题和右（内容特定的菜单 - 打印、复制）/左（用于菜单）按钮，具体取决于内容。

1. navigator 和 NavExp 有什么区别？ （它说它提供redux 或flux 风格的导航，也看不懂）
2. reducer 的用途是什么？（使用哪一个？（Stack，Find））
3. NavigationRootContainer？
4. 在哪里声明我的所有状态，因为这些都是常量？
5. 动作和状态有什么区别？
6. 对于导航器，我们在 NavExp 中使用 renderScene 函数来实际渲染场景

Answer 1

在一个 SO 问题中要解开很多内容，因此通过进行一些研究然后将这个问题分成几个较小的问题，您可能会得到更好的服务。这里有一些提示可以帮助您入门。

总体：新 NavigationExperimental 的目的是为 React Native 创建一个无状态导航结构，遵循与 React 相同的原则。旧的 Navigator 组件比新的 NavExp 更依赖于维护和改变状态。如果你想 React 喜欢采用一组 props，然后在发生变化时渲染出一个全新的 UI，那么新的 NavExp 旨在进一步促进这一点。

这是因为当您使用类似 Flux 的模式来管理应用程序中的状态时，它会更加有用。我建议阅读Flux，或者在我看来，更容易掌握Redux 模式的实现。

这在一定程度上回答了#1，通过这些链接后你会更好地理解#2 的答案。

1. NavigationRootContainer 是一个有用的元素（尽管不是必需的），它在使用 NavExp 时提供了一些结构和功能。 Facebook 的例子利用了它。如果您使用 Redux 之类的工具实现 NavExp，则不需要使用它，因为您会重复使用 reducer。

2. 我假设您在决定渲染适当的场景/卡片/屏幕时谈论的是状态？这些可以在任何地方声明，实际上只是字符串。您甚至不需要在任何地方声明它们。

3. 状态是构成应用程序移动部分的数据和变量的集合。例如，如果您有一个购物车应用程序，您会将客户的姓名和他们购物车的内容存储在您的应用程序状态中，以及他们当前在哪个屏幕上，他们之前在哪个屏幕上等等。任何可以更改进入状态。

动作就像向天空发射耀斑，以提醒应用程序的其他部分发生了变化。用户将新商品添加到购物车？发送 ITEM_ADDED_TO_CART 操作以及项目的 ID。用户按下一个按钮到主屏幕？发送NAVIGATE_TO_SCREEN 操作以及主屏幕的标识符。动作由 reducer 处理，reducer 对状态进行更改，然后告诉 React Native 开始重新渲染所有内容。

6. 这不是一个问题，但您也有一个带有 NavExp 的 renderScene 方法，它的功能几乎相同：它吐出屏幕的内容，无论它应该是什么。

（仅供参考，我对此没有任何官方消息，但如果您已经对 Navigator 感到满意并已实现它，那么在可预见的未来您可能会继续使用它，而不是重写您的应用程序以利用 NavigationExperimental。）

Answer 2

根据此处的 cmets，您应该使用 NavigationExpermiental： 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);