react+zarm实现底部导航栏的示例代码.docx
第
react+zarm实现底部导航栏的示例代码
目录需要实现的效果实现过程1.使用prop-types库进行类型检查2.使用useNavigate3.编写标签栏组件4.使用标签栏组件5.添加对应的页面路由6.效果参考资料
需要实现的效果
需要实现下面栏目固定,并且点击时切换到不同页面路由
实现过程
1.使用prop-types库进行类型检查
注意:自Reactv15.5起,React.PropTypes已移入另一个包中。请使用prop-types库代替。
PropTypes提供了使用不同验证器的例子:
importPropTypesfromprop-types;
MyCpTypes={
//你可以将属性声明为JS原生类型,默认情况下
//这些属性都是可选的。
optionalArray:PropTypes.array,
optionalBool:PropTypes.bool,
optionalFunc:PropTypes.func,
optionalNumber:PropTypes.number,
optionalObject:PropTypes.object,
optionalString:PropTypes.string,
optionalSymbol:PropTypes.symbol,
//任何可被渲染的元素(包括数字、字符串、元素或数组)
//(或Fragment)也包含这些类型。
optionalNode:PropTypes.node,
//一个React元素。
optionalElement:PropTypes.element,
//一个React元素类型(即,MyComponent)。
optionalElementType:PropTypes.elementType,
//你也可以声明prop为类的实例,这里使用
//JS的instanceof操作符。
optionalMessage:PropTypes.instanceOf(Message),
//你可以让你的prop只能是特定的值,指定它为
//枚举类型。
optionalEnum:PropTypes.oneOf([News,Photos]),
//一个对象可以是几种类型中的任意一个类型
optionalUnion:PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
//可以指定一个数组由某一类型的元素组成
optionalArrayOf:PropTypes.arrayOf(PropTypes.number),
//可以指定一个对象由某一类型的值组成
optionalObjectOf:PropTypes.objectOf(PropTypes.number),
//可以指定一个对象由特定的类型值组成
optionalObjectWithShape:PropTypes.shape({
color:PropTypes.string,
fontSize:PropTypes.number
//Anobjectwithwarningsonextraproperties
optionalObjectWithStrictShape:PropTypes.exact({
name:PropTypes.string,
quantity:PropTypes.number
//你可以在任何PropTypes属性后面加上`isRequired`,确保
//这个prop没有被提供时,会打印警告信息。
requiredFunc:PropTypes.func.isRequired,
//任意类型的必需数据
requiredAny:PropTypes.any.isRequired,
//你可以指定一个自定义验证器。它在验证失败时应返回一个Error对象。
//请不要使用`console.warn`或抛出异常,因为这在`oneOfType`中不会起作用。
customProp:function(props,propName,componentNam