React-native 导航实验示例？

Posted 2023-02-22

【中文标题】React-native 导航实验示例？

【英文标题】：React-native navigation experimental example?

【发布时间】：2016-08-14 00:01:05

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

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

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

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

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

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

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

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

【讨论】：

我开始开发一个应用程序，我不知道两者中的任何一个，所以我认为使用 NavExp 会更合乎逻辑。我们在哪里可以找到文档？有没有还是太早了？

@kfc 尚无文档，但希望它们很快就会出现。您可以查看UIExample 项目的实现。我还整理了一份关于使用 NavExp 和 Redux 的small demo app。最后提示：在尝试将 Redux/Flux 与导航结合使用之前，请务必先学习 Redux。

我还建议查看 github.com/aksonov/react-native-router-flux 它使用新的 Navigation API 并提供示例

【参考方案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);