回放导航的流程导航
简化本地反应中的流程导航
流程导航提供了简化的 API ,用于管理您的 React 本地应用程序中的导航流量 反应导航。它总结了流程管理的复杂性,允许单个屏幕使用简单的方法导航流程,例如 goToNextStep 财务报告和审定财务报表 goToPreviousStep,而不需要理解整个导航堆栈,或者知道哪个页是下一个页.
特征
- 简化流程管理: 获得一个单一位置上您流量的全面概览. 这使得新开发者能够快速地理解整个流量,而无需单独检查每个页面.
- 责任分离:屏幕不知道其在流量中的具体位置. 他们不需要知道下一页是哪页;他们只是顺着流中的下一页来导航.
- 宣布屏幕顺序: 以声明方式定义导航流中屏幕的顺序,确保清晰可维护的导航结构.
安装
流道导航以反应-通航的本土堆栈导航器为上部. 所以,它需要两个 反应导航 编辑 本地堆栈导航器 已安装.
要安装流导, 运行 :
yarn add @bam.tech/flow-navigator
# or
npm install @bam.tech/flow-navigator
使用量
基本用途
import { createFlowNavigator } from '@bam.tech/flow-navigator';
const FlowNavigator = createFlowNavigator();
export const FlowNavigatorExample = () => {
// Define your screens and their order in the flow
return (
<FlowNavigator.Navigator>
<FlowNavigator.Screen name="Step1" component={Step1Page} />
<FlowNavigator.Screen name="Step2" component={Step2Page} />
<FlowNavigator.Screen name="Step3" component={Step2Page} />
</FlowNavigator.Navigator>
);
};
在每一个屏幕组件中,可以使用:
import { useFlow } from '@bam.tech/flow-navigator';
const Step1Page = () => {
const { goToNextStep, goToPreviousStep, currentStep } = useFlow();
return (
<Button title="Go to next page" onPress={() => goToNextStep()} />
)
};
您可以在 实例 文件夹.
定义有条件的步骤
在某些情况下,流动可能包括有条件的步骤。 这些步骤可能取决于用户的具体情况,或取决于某些行动是否已经完成。 您可以在导航流中声明管理这样的有条件步骤 .
以下是根据hasTopassStep2变量有条件地显示"步骤2"的例子. 此变量可能是从后端获取的一块数据, 也可能是您应用程序中的状态 。 就我们而言,我们用Jotai 在当地储存用户数据.
import { createFlowNavigator } from '@bam.tech/flow-navigator';
export const flagAtom = atom(false);
const FlowNavigator = createFlowNavigator();
export const FlowNavigatorExample = () => {
const [flag] = useAtom(flagAtom);
return (
<FlowNavigator.Navigator>
<FlowNavigator.Screen name="Step1" component={Step1Page} />
{flag && <FlowNavigator.Screen name="Step2" component={Step2Page} />}
<FlowNavigator.Screen name="Step3" component={Step3Page} />
</FlowNavigator.Navigator>
);
};
在这个例子中,Step2屏幕只有在有ToPassStep2评价为真的情况下才会被包含在流量中.
您可以通过设置布尔状态来启用或禁用您流中的任意路径 : setFlag(false)
import { useFlow } from '@bam.tech/flow-navigator';
export const Step1Page = () => {
const {goBack, goToNextStep} = useFlow();
const [flag] = useAtom(flagAtom);
const onNextPress = async () => {
setFlag(false);
goToNextStep();
};
const onBackPress = () => {
goBack();
};
return (
<View style={styles.container}>
<Text style={styles.pageTitle}>Current page: 1</Text>
<FlowInfos />
<Button title="next" onPress={onNextPress} />
<Button title="back" onPress={onBackPress} />
</View>
);
};
您可以在 实例 文件夹
使用多个屏幕定义步骤
在某些情况下,流量的单步可能包含多个屏幕. 要在一步内组合这些屏幕, 您有几种选项: 使用 组 或者说 嵌入式导航器。 。 。 .
两种方法的实例可见于示例文件夹.
如果适合你的用法,我们建议使用小组 然而,需要注意的一个限制是: currentStep 将反映当前焦点屏幕的名称,而不是组名称。 所以台阶上所有的屏幕都不一样 currentStep 数值。 与巢而通航, currentStep 是子导航器的名称,它为步骤提供了更一致的表示. 请注意,子导航器的所有页会对应一个进度指数的递增,在整个步骤中保持不变.
使用大小写
Flows是具有预定义顺序的页面序列,引导用户通过您应用程序内部的特定进程. 无论是复杂还是直截了当,流量都是许多应用程序用户体验的一个基本部分. 以下是流程导航特别有用的一些常见例子:
- 登入流量
- 出版后流程
- 订阅流程
- 购物车检出程序
- 反馈流量调查
- 配置设置流程
API 定义
流动导航器
流程导航基于 本地堆栈,它继承了相同的API.
使用花纹
在流程导航下定义的屏幕内,您可以使用 useFlow
useFlow 提供下列帮助:
goToNextStep:根据导航流中屏幕的顺序来导航到流量的下一步.goToPreviousStep:根据导航流中屏幕的顺序来导航到流量中上一步.quitFlow:为出出流.
useFlow 还提供关于流动当前步骤的信息。 它包含以下属性:
currentStep: 表示流中当前步骤标识符的字符串。 基于屏幕的名称.progress:一个数字,表示流动中的进展。 它被计算为当前指数与路线总数之比.canGoToPreviousStep:布尔表示是否可通向上一个步骤.canGoToNextStep:布尔表示是否可通向下一步.
捐款
调用请求和专题建议非常受欢迎!
测试您的更改
您可以在示例文件夹中尝试您的更改 . 使用 线条链接 以尝试本地图书馆版本 :
- 在根目录中
@bam.tech/flow-navigator运行
cd packages/lib
yarn link
- 实例项目的链接 :
cd packages/example
yarn link "@bam.tech/flow-navigator"
- 将代码从TS转至JS, 以尝试例子中的变化。 您可以在 repo 根运行此命令
yarn transpile:lib
- 完成时解除链接, 更改一旦发布 :
cd packages/example
yarn unlink "@bam.tech/flow-navigator"
yarn install
发布软件包
- 将套件./包装/lib/包装.json增加
- 执行更改 git 承诺 - m "chore: tump 版本"
- 添加匹配版本的标签
git tag vx.x.x && git push --tags
- 然后发布软件包: 在 repo 根处运行此命令
yarn publish:lib