vfup-nice-modal-react

此项目基于 @ebay/nice-modal-react。

主要的改进是支持在微信小程序无法公用渲染节点环境中使用 nice-modal-react。

支持 taro 框架，并且理论上支持 remax 等其他使用 react 编写小程序的框架。

用法

使用此 library 需要对@ebay/nice-modal-react 有基本的了解。

将 @ebay/nice-modal-react 换成 vfup-nice-modal-react 即可。

taro react 微信小程序使用例子

微信小程序中无法通过在 App 组件中使用渲染节点。 不过可以通过封装 BasePage 高阶组件包裹 Page 的方式达到类似的效果。

具体代码

• 封装BasePage组件

'src/layout/BasePage.tsx' 内容

1/* eslint-disable react-hooks/rules-of-hooks */
2import { Provider, ProviderHandle } from 'vfup-nice-modal-react';
3import { useDidShow } from '@tarojs/taro';
4import { useRef } from 'react';
5
6export default function BasePage(Page: any) {
7  return (props) => {
8    const ref = useRef<ProviderHandle>();
9    useDidShow(() => {
10      ref.current && ref.current.reset();
11    });
12    return (
13      <Provider ref={ref}>
14        <Page {...props} />
15      </Provider>
16    );
17  };
18}

• 包裹页面组件

'index/index.tsx' 内容

1import { Text, View } from '@tarojs/components';
2import { navigateTo } from '@tarojs/taro';
3import { show } from 'vfup-nice-modal-react';
4// 你自己的弹窗
5import ModalDemo from '@/components/ModalDemo';
6import BasePage from '@/layout/BasePage';
7import './index.scss';
8
9export default BasePage(function Index() {
10  const onClick_showModal = () => {
11    show(ModalDemo, {
12      // ModalDemo 的props
13    });
14  };
15
16  return (
17    <View className="index">
18      <View>
19        <Text onClick={onClick_showModal}>show modal!</Text>
20      </View>
21    </View>
22  );
23});