移动开发UI组件【免费下载链接】react-native-router-fluxThe first declarative React Native router项目地址https://gitcode.com/gh_mirrors/re/react-native-router-flux点击查看免费下载本篇指南以 react-native-router-flux v3 版本的官方 API 配置文档docs/v3/API_CONFIGURATION.md为骨架系统梳理 Router、Scene、ActionConst、动画、手势、Tab 与导航栏的全部配置项并结合仓库 src/ 目录下的实际源码实现Store、Reducer、NavBar、Router 等剖析每个参数在底层是如何被解析与消费的帮助你写出可预测、可维护的声明式路由配置。读完本篇你将能够理解 RNRF 全部公开导出与 ActionConst 常量体系、按场景类型push/jump/replace/reset/modal/switch正确组织导航栈、定制动画与手势、配置 Tab 容器与导航栏的左/中/右按钮以及通过 reducer 与 Redux/Flux 深度集成。可用导入Available importsreact-native-router-flux 是一个声明式declarative的 React Native 路由库你用 JSX 描述整个导航结构而不是用命令式 API 逐个创建页面。v3 版本从包入口 src/index.js 导出以下能力导出说明Router根容器接收场景树children或预创建的 scenes 对象负责装配导航器与 Android 返回键、Deep Link 处理Scene声明单个页面/容器节点的组件所有导航配置都在它的 props 上展开Modal模态容器类型标记对应typemodalTabBar内置 Tab 栏渲染器对应tabs容器getInitialState获取导航初始状态v3 早期 APIReducer基于 react-navigation 的 reducer 创建器返回(state, action) stateDefaultRenderer默认的场景渲染器v3 早期 APISwitch切换容器类型标记对应typeswitchActions全局动作对象Actions.xxx(params)即导航到 key 为 xxx 的场景ActionConst所有动作/场景类型的常量集合见下文专节NavBar内置导航栏组件含 BackButton/LeftButton/RightButton 子组件注v3 为旧版 API当前仓库根目录还维护着 v4 版本导出Reducer, ActionConst, Router, Scene, NavigationStore, Actions, Modal, Lightbox, Stack, Drawer, Tabs, Overlay, pathParser。本篇严格遵循 v3 文档口径文中当前源码指仓库 src/ 中的实现相关差异会单独说明。Router 配置Router是导航树的根。文档给出的属性表如下右侧补充了源码层面的消费方式对应 src/Router.js 与 src/Store.jsPropertyTypeDefaultDescriptionreducerfunction—可选用户自定义 reducer用于拦截所有动作并加入自定义逻辑如日志、鉴权拦截createReducerfunction—返回 reducer 的函数接收{initialState, scenes}参数可包装Reducer(param)实现自定义 reducer。见下方 Flux 使用章节other props——所有其他属性都会被透传给所有 scene作为继承属性children—required未传 scenes 时Scene 根元素scenesobjectoptional通过Actions.create()预创建的场景对象。可在 React 处理前就创建全部动作不需要时可改为传 childrengetSceneStylefunctionoptional可选覆盖 NavigationCard 的 Animated.View 渲染场景的样式backAndroidHandlerfunctionoptional可选覆盖 Android 返回键处理函数返回true留在应用内、返回false退出应用。默认 handler 会 pop 一个场景栈空时退出应用onBackAndroidfunctionoptional返回键按下且场景被 pop 之后回调不改变默认行为onExitAppfunctionoptional可选覆盖根场景按下返回键后的默认动作。返回true留在应用、返回false退出应用源码实现解读Router组件本身是一个函数组件src/Router.js#L111-L128若传入了scenes/navigator则直接使用否则调用navigationStore.create(children, data, wrapBy)把 JSX 场景树编译为 react-navigation 的 AppContainer。getSceneStyle/sceneStyle在源码中被映射为 react-navigation 的cardStylesrc/Router.js#L115-L120即场景卡片的样式。backAndroidHandler的默认值实现在 src/Router.js#L38onBackPress () this.props.navigationStore.pop()即默认返回键行为就是 pop 当前场景。reducer与createReducer的接线在 src/Router.js#L123navigationStore.reducer createReducer createReducer(props)随后 src/Store.js#L515-L519 的setCustomReducer会把自定义 reducer 挂到导航器 router 的getStateForAction上从而让每个导航动作都先经过你的 reducer。另外 Router 还支持uriPrefix、onDeepLink用于 Deep Link 解析与navigationStore自定义 Store 实例这些在 v3 文档表格之外的源码中均有实现src/Router.js#L129-L153。与 Redux/Flux 集成createReducer 用法文档指出createReducer接收{initialState, scenes}参数典型用法是包装内置Reducerimport { Reducer } from react-native-router-flux; const reducerCreate params { const defaultReducer Reducer(params); return (state, action) defaultReducer(state, action); }; // 传入 Router Router createReducer{reducerCreate}…/Router仓库中的内置 reducer 实现在 src/Reducer.js默认行为是把动作交给 react-navigation 的getStateForAction但对ActionConst.POP_TO会循环执行StackActions.pop()直到到达目标 route并打印未知 route 的警告src/Reducer.js#L11-L29对ActionConst.REPLACE则用popPrevious弹出前一个场景实现替换语义src/Reducer.js#L30-L40。Scene 配置Scene是路由声明的最小单元。其 key 会成为全局动作名Actions.key(params)。文档核心属性表如下PropertyTypeDefaultDescriptionkeystringrequired用于触发跳转的动作名如Actions.name(params)。必须唯一componentReact.Componentsemi-required要显示的组件。定义嵌套 Scene 时可不写若定义在容器场景上则作为自定义容器 rendererinitialboolfalse设为true表示初始场景typestringActionConst.PUSH或ActionConst.JUMP定义新页面如何加入导航栈。取值ActionConst.PUSH、ActionConst.JUMP、ActionConst.REPLACE、ActionConst.RESET之一。若父容器是 tabbartabstrue会自动设为ActionConst.JUMPclonebool—标记clone的场景会被当作模板在 push 时克隆到当前场景的父级。见示例passPropsboolfalse把自己的所有 props除 style、key、name、component、tabs传给子级。注意 passProps 本身也会被传给子级源码层面的关键行为key 与动作生成在 src/Store.js#L760-L771processScene会为每个 key 在 navigationStore 上动态创建同名函数this[key]该函数调用actions.execute(type, key, props, params)——这就是Actions.key()的底层来源。key 不能是保留字保留字清单见 src/Store.js#L41-L74如push、pop、refresh、replace、title等均不可用作场景 key。type 默认值type tabs || drawer ? jump : pushsrc/Store.js#L694即 Tab/抽屉容器内的子场景自动使用 jump普通栈场景默认 push与文档一致。initialinitialRouteName取第一个带initial标记或第一个无 initial 标记的子场景见 src/Store.js#L781-L785。cloneprocessScene会收集所有child.props.clone的场景加入clones数组并在后续栈节点创建时把这些模板克隆进去src/Store.js#L670-L682实现同一个页面模板可在任意位置被 push 出独立实例的效果。passProps 与属性继承文档强调other props 都会传给所有 scenes。源码中commonProps {...inheritProps, ...parentProps}逐层向下继承src/Store.js#L656-L664且有一批dontInheritKeyscomponent、key、tabs、type、style 等src/Store.js#L76-L96不会被继承避免配置串扰。clone 与嵌套场景示例Scene keyroot Scene keyregister component{Register} clone / Scene keyhome component{Home} / /Scene当你在任意场景中调用Actions.register()时register会被克隆到当前场景的父级下 push从而可以从任何位置打开同一个注册页模板。ActionConst动作常量体系文档建议定义 scene type 或传动作参数时可以使用字符串简写但推荐始终使用常量以保证一致性// 简写会被转换为常量值传给 reducer Actions.ROUTE_NAME({type: reset}); Scene keymyscene typereplace / // 推荐使用常量 Actions.ROUTE_NAME({type: ActionConst.RESET}); Scene keymyscene type{ActionConst.REPLACE} /常量对照表PropertyTypeValueShorthandActionConst.JUMPstringREACT_NATIVE_ROUTER_FLUX_JUMPjumpActionConst.PUSHstringREACT_NATIVE_ROUTER_FLUX_PUSHpushActionConst.REPLACEstringREACT_NATIVE_ROUTER_FLUX_REPLACEreplaceActionConst.BACKstringREACT_NATIVE_ROUTER_FLUX_BACKbackActionConst.BACK_ACTIONstringREACT_NATIVE_ROUTER_FLUX_BACK_ACTIONBackActionActionConst.POP_AND_REPLACEstringREACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACEpopAndReplaceActionConst.POP_TOstringREACT_NATIVE_ROUTER_FLUX_POP_TOpopToActionConst.REFRESHstringREACT_NATIVE_ROUTER_FLUX_REFRESHrefreshActionConst.RESETstringREACT_NATIVE_ROUTER_FLUX_RESETresetActionConst.FOCUSstringREACT_NATIVE_ROUTER_FLUX_FOCUSfocus这些常量定义在 src/ActionConst.js此外该文件还包含文档表格之外的PUSH_OR_POP、BLUR、ANDROID_BACK。ActionConst 与 Scene.type 的关系ActionConst是一组表示各种动作 / scene.type 真实值的常量作用类似 Redux action type目的是屏蔽未来实现变化。你可以直接使用它们例如Actions.pop()会在源码中 dispatch 对应动作你也可以把常量设为 scene 的 type此时调用Actions.main()就会根据该 scene type或默认 typedispatch 对应动作。注意并非每个 ActionConst 都能以同样的方式使用有的只可作动作、有的只可作 scene type这正是常量集合遮蔽真实值的意义。仓库源码中的动作映射表见 src/Store.js#L29-L39export const actionMap { [ActionConst.JUMP]: jump, [ActionConst.PUSH]: push, [ActionConst.REPLACE]: replace, [ActionConst.BACK]: pop, [ActionConst.BACK_ACTION]: pop, [ActionConst.POP_TO]: popTo, [ActionConst.REFRESH]: refresh, [ActionConst.RESET]: reset, [ActionConst.PUSH_OR_POP]: push, };Actions.execute会先查actionMap把简写/常量翻译成具体动作函数src/Store.js#L882-L891再调用push/jump/replace/pop/popTo/reset/refresh等实现src/Store.js#L893-L969。Scene.type 详解Scene.type决定新页面如何加入导航栈。文档列出的取值如下默认 push每个字符串字面量都有对应的 ActionConst 常量replace用新 route 替换当前 route。底层实现见 src/Reducer.js#L30-L40即 navigate 后调用popPrevious弹出被替换者。actionSheet弹出 Action Sheet必须传入回调函数作为 callback。modal把组件的 component 插入到导航器组件之后的 route 栈中。可用于弹出式告警也可用于导航器跳转前的必要流程如登录鉴权。可通过Actions.dismiss()关闭。switch用于 Tab 页面。reset与replace类似但会卸载导航栈中的组件。底层通过StackActions.reset实现src/Store.js#L954-L969会重置栈到单一目标页面。transitionToTop重置路由栈[route.name]并带动画若 route 有 sceneConfig。文档示例Route namelogin schemamodal component{Login} typetransitionToTop /。另有jumpTab 内切换不新增栈条目与push默认入栈。动画Animation配置PropertyTypeDefaultDescriptiondurationnumber—可选。快捷方式为给定时长毫秒生成一个applyAnimation函数内部用Animated.timingdirectionstringhorizontal动画方向horizontal/vertical/leftToRight/topToBottomhorizontal 为从右到左vertical 为从下到上animationstring—转场动画选项目前仅 fadeanimationStylefunction—可选场景转场的插值函数animationStyle{interpolationFunction}applyAnimationfunction—可选若提供则覆盖默认的 spring 动画源码侧duration在 src/Store.js#L646-L654 被转换为 react-navigation 的transitionConfigif (duration ! undefined !transitionConfig) { transitionConfig () ({ transitionSpec: { duration, timing: Animated.timing, easing: Easing.step0, }, }); }即duration通过Animated.timing配Easing.step0实现定长转场animationStyle/applyAnimation属于 v3 时代基于 NavigationExperimental 的自定义插值/弹簧动画接口在新版源码中由 react-navigation 的transitionConfig体系接管。手势Gestures配置PropertyTypeDefaultDescriptionpanHandlersobject—可选。传null可禁用 iOS 侧滑返回手势getPanHandlersfunctionoptional可选覆盖场景的手势处理器源码对应在 src/Store.js#L216-L222当panHandlers null或动态参数中的panHandlers为 null时设置res.gesturesEnabled false即关闭 react-navigation 的返回手势。场景样式Scene stylesPropertyTypeDefaultDescriptionsceneStyleView style{ flex: 1 }可选覆盖场景组件的样式getSceneStylefunctionoptional可选覆盖 NavigationCard 的 Animated.View 渲染场景的样式。第一参数为NavigationSceneRendererProps第二参数为{hideNavBar, hideTabBar, isActive}见 Example app在 Router 层面sceneStyle与getSceneStyle都会被写进cardStylesrc/Router.js#L115-L120从而作用于场景卡片Scene 层面的sceneStyle则直接作为组件外层 View 的样式。仓库示例中的用法可参考 examples/react-native/components/Home.js 等页面组件对sceneStyle的覆盖方式。Tabs 配置PropertyTypeDefaultDescriptiontabsboolfalse定义为 TabBar 场景容器子场景以 Tab 显示。未定义component时使用内置TabBar作为 renderer。所有子场景都会被包装进各自的 navbartabBarStyleView style—可选Tabs 组件样式覆盖tabBarBackgroundImageImage source—可选Tabs 组件背景图tabBarIconContainerStyleView style—可选每个 tab 图标所在 View 的样式覆盖hideTabBarboolfalse隐藏此场景及其后续场景的 tab bar直到显式恢复仅在使用内置 TabBar 作为父 renderer 时生效hideOnChildTabsboolfalse当另一个tabs场景加入导航栈时隐藏 tab barpressOpacitynumber0.2点击 tab 时的透明度源码层面tabstrue时processScene会调用createMaterialTopTabNavigatortabBarPosition ! top时为createBottomTabNavigator并把tabBarStyle、activeTintColor、inactiveTintColor、showLabel、labelStyle、tabStyle等汇总进tabBarOptionssrc/Store.js#L112-L126 与 src/Store.js#L813-L830。hideTabBar会被映射为 react-navigation 的tabBarVisible: falsesrc/Store.js#L316-L325。Tabs 示例Scene keytabbar tabs{true} tabBarStyle{{ backgroundColor: #fff }} Scene keyhome component{Home} title首页 icon{TabIcon} / Scene keyprofile component{Profile} title我的 icon{TabIcon} / /Scene导航栏Navigation Bar配置PropertyTypeDefaultDescriptionhideNavBarboolfalse隐藏此场景及其后续场景的导航栏直到显式恢复navigationBarStyleView style—可选导航栏样式覆盖navigationBarBackgroundImageImage source—可选导航栏背景图navigationBarBackgroundImageStyleImage style—可选导航栏背景图样式覆盖navigationBarTitleImageImage source—可选用图片替代文字标题navigationBarTitleImageStyleImage style—可选导航栏标题图片样式覆盖navigationBarShowImageSelectionboolfalse使用 navigationBarTitleImage 时隐藏导航栏内的选择线navigationBarSelecionStyleView style—可选在 navigationBarTitleImage 下方添加选择线的样式navBarReact.Component—可选场景的自定义 NavBar。可参考内置 NavBar 组件实现drawerImageImage sourcerequire(./menu_burger.png)快速覆盖导航栏中的抽屉菜单图标源码实现中这些导航栏配置最终会进入 react-navigation 的header系列选项src/Store.js#L127-L355navigationBarStyle → headerStyle、navigationBarTitleImage → headerTitle以Image渲染src/Store.js#L224-L226、hideNavBar → header nullsrc/Store.js#L327-L333。内置导航栏组件实现在 src/NavBar.js其中默认抽屉图标来自 images/menu_burger.png返回键默认图标来自 images/back_chevron.png。导航栏标题TitlePropertyTypeDefaultDescriptiontitlestringnull导航栏显示的标题getTitlefunctionoptional可选基于 state 返回标题值的闭包renderTitlefunctionoptional可选渲染标题的闭包titleStyleText style—可选标题元素样式覆盖titleWrapperStyleView style—可选标题外层容器样式覆盖titleOpacitystringoptional设置导航栏标题的透明度titlePropsobjectnull设置到标题组件上的其他任意属性源码中getTitle会被当作函数调用求值title: getValue(navigationParams.title || title || getTitle, state)src/Store.js#L204getValue会执行函数并传入当前 statesrc/Store.js#L98-L100。导航栏返回按钮Back buttonPropertyTypeDefaultDescriptionbackTitlestring—可选与返回按钮一起显示的字符串renderBackButtonfunction—可选当此 route 是上一 route 时渲染返回文字或按钮的闭包backButtonImageImage sourcerequire(./back_chevron.png)快速覆盖导航栏中的返回按钮图标backButtonTextStyleText style—可选返回标题元素样式覆盖hideBackImagebooleanfalse不显示默认返回按钮图片onBackfunctionActions.pop返回按钮的触发动作内置返回按钮实现在 src/NavBar.js#L16-L44默认使用 react-navigation 的HeaderBackButton若自定义了backButtonImage则渲染自定义图片hideBackImage为 true 时不显示图片未提供onBack时默认 dispatchNavigationActions.back()与文档默认值Actions.pop语义一致。导航栏左侧按钮Left buttonPropertyTypeDefaultDescriptionleftTitlestring—可选当上一 route 未提供renderBackButton时显示在左侧的字符串。优先级renderBackButtonleftTitle 上一 route 的titlegetLeftTitlefunction—可选同上但以闭包形式返回。优先级renderBackButtongetLeftTitle 上一 route 的titlerenderLeftButtonfunction—可选渲染左侧标题/按钮元素的闭包onLeftfunction—左侧导航栏按钮按下时调用leftButtonImageImage source—左侧按钮图片leftButtonIconStyleView style—左侧按钮图片样式leftButtonStyleView style—可选左侧标题/按钮容器样式覆盖leftButtonTextStyleText style—可选左侧标题元素样式覆盖左侧按钮实现在 src/NavBar.js#L46-L98支持leftButton/left自定义组件当有drawerImage且drawerPosition ! right时自动变成抽屉开合按钮dispatchDrawerActions.openDrawer()同时注意文档中的提醒——onLeft与leftTitle/leftButtonImage必须同时指定否则源码会打印警告src/NavBar.js#L93-L96。导航栏右侧按钮Right buttonPropertyTypeDefaultDescriptionrightTitlestring—可选右侧显示的字符串。必须提供onRight才会显示getRightTitlefunction—可选以闭包形式返回右侧文字。同样必须提供onRightrenderRightButtonfunction—可选渲染右侧标题/按钮元素的闭包onRightfunction—右侧导航栏按钮按下时调用rightButtonImageImage source—右侧按钮图片rightButtonIconStyleView style—右侧按钮图片样式rightButtonStyleView style—可选右侧标题/按钮容器样式覆盖rightButtonTextStyleText style—可选右侧标题元素样式覆盖右侧按钮实现在 src/NavBar.js#L104-L160行为与左侧对称支持rightButton/right自定义组件onRight与rightTitle/rightButtonImage必须成对出现否则源码同样打印警告src/NavBar.js#L155-L158。右侧按钮的显隐判定还包含抽屉在右侧drawerPosition right时显示抽屉图标的情况src/Store.js#L261-L275。其他透传属性PropertyTypeDefaultDescription...other props——所有其他属性都会被透传给组件实例这也是 RNRF声明式路由的核心能力Scene 上任意自定义属性如title、data、hideNavBar之外的业务参数都会通过导航参数params进入页面组件 props。源码中createWrapper会把navigation.state.params展开到组件 props 上src/Store.js#L432-L450同时reservedKeys之外以on开头且后续为大写字母的字符串属性还会被转换为对 store 动作的引用extendPropssrc/Store.js#L366-L385。与 Redux/Flux 深度集成虽然 docs/v3/API_CONFIGURATION.md 的核心是 API 表格但其中明确引用了 Redux/Flux 用法createReducer、reducer 拦截完整集成步骤记录在姊妹文档 docs/v3/REDUX_FLUX.md关键流程如下创建路由 reducer监听ActionConst.FOCUS场景获得焦点时由 Store 自动 dispatch见 src/Store.js#L568-L572把当前场景写入 state组合 reducer用combineReducers与业务 reducer 合并接入 Routerconnect()(Router)后放入 ReduxProviderstore 的dispatch会接管导航动作分发src/Router.js#L87-L99消费场景信息任何 connect 的组件通过this.props.routes.scene读取当前场景也可用 context 的routes直接调用routes.login(params)、routes.back()等动作。文档同时给出一个重要告警Router应当只渲染一次。若将 Router 包在 Provider 下并监听 redux 更新会触发Key xxx is already defined报错。规避方案是用Actions.create()预创建 scenes 并传入Router的scenes属性同时把应用主逻辑移到 Router 的子场景中完整示例见 docs/v3/REDUX_FLUX.md 的 Step 3 与 About Key xxx is already defined 一节。关键源码路径速查入口与导出src/index.jsAction 常量定义src/ActionConst.js导航 Store场景编译、动作映射、状态管理src/Store.jsReducerPOP_TO / REPLACE 语义src/Reducer.jsRouter 组件返回键、Deep Link、createReducer 接线src/Router.js内置导航栏Back/Left/Right 按钮src/NavBar.js导航状态工具getActiveState/popPrevious 等src/State.js全局 Actions 实例src/defaultStore.js测试__tests__/scenes.test.js、test/setup.js以上就是 react-native-router-flux v3 API 与配置的完整梳理。实践建议场景 type 一律使用ActionConst常量Tab/抽屉容器内的子场景交给框架自动设置为jump导航栏左右按钮的onLeft/onRight与标题/图片必须成对声明接入 Redux 时务必遵守Router 只渲染一次 Actions.create 预创建 scenes的约束即可稳定驾驭这套声明式路由体系。赞分享移动开发UI组件【免费下载链接】react-native-router-fluxThe first declarative React Native router项目地址https://gitcode.com/gh_mirrors/re/react-native-router-flux点击查看免费下载相关推荐如何在FlashKDA中使用initial_state与final_state有状态推理完全指南如何在FlashKDA中使用initial_state与final_state有状态推理完全指南 FlashKDA 是构建在 CUTLASS 之上的高性能 K人工智能算子库大模型cann/asc-devkit卷积TilingTConv3DBackpropInputTiling结构体 TConv3DBackpropInputTiling结构体包含Conv3DBackpropInput人工智能深度学习算子库CANNAscend10分钟上手TheIdServer从安装到配置的快速入门教程10分钟上手TheIdServer从安装到配置的快速入门教程 想要快速搭建一个功能强大的身份认证服务器吗TheIdServer是您的最佳选择这个基于Due上一篇终极AI可穿戴设备开源许可证选择指南MIT与Apache 2.0深度对比下一篇uni-app x list-view 长列表组件全指南复用回收机制、下拉刷新与性能优化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
