react native 自定义提示hook,usePrompt封装

565 阅读1分钟

使用到的依赖:

react-native-root-siblings

react-native中插入元素,参考:github.com/magicismigh…

react-spring

react动画框架,参考:react-spring.io/

prompt组件:

PromptComponentProps

组件props

image-20210812155226968

PromptComponentRef

组件ref,对外使用

image-20210812155357999

显示标志

image-20210812161624962

useTransition

动画样式使用useTransition

image-20210812161426802

定时关闭

image-20210812161533016

对外导出方法

image-20210812161708660

显示内容的组件

内容组件,由transitions(即上边useTransition包装的动画样式)包装

image-20210812161851102

最终导出

搭配Mask组件

image-20210812162116978

mask组件:

useTransition

动画样式使用useTransition

image-20210812160207467

maskTransitions

组件使用maskTransitions包装

image-20210812160146696

源码:

github.com/john-ui-kit…

组合成usePrompt

RootSiblings

需要插入的组件ref

image-20210812162332893

PromptComponentRef

Prompt组件的ref

image-20210812162427603

show和hide方法

image-20210812162535714

使用:

image-20210812162756741

效果:

Kapture 2021-08-12 at 16.35.05

完整源码:

github.com/john-ui-kit…