react-navigation-lazy-screen
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    react-navigation-lazy-screen

    实现页面懒加载,并补发首次focus事件

    此库需要结合react-navigation使用,目前支持 StackNavigaton 和 BottomNavigation。

    词库解决的主要问题为:当我们在 react-navigation 中使用懒加载来加载页面时无法收到首个 focus 事件。react-navigation-lazy-screen 会向页面补发首个 focus 事件。并且 react-navigation-lazy-screen 在使用形式上更加简洁。

    Installation

    npm install react-navigation-lazy-screen

    Usage

    1. 在Router中加入 LazyScreen 组件

    import LazyScreen from "react-navigation-lazy-screen";
    
    // Tab路由
    const Tab = createBottomTabNavigator();
    function Tabs() {
      return (
        <Tab.Navigator>
          <Tab.Screen name="TabA">
            {(props) => {
              return (
                <LazyScreen
                  {...props} // 传入navigation、route等属性,这些属性会传入 TabScreen组件
                  pageName="TabA" // 自定义属性,这些属性会传入 TabScreen组件
                  fallback={<Text>Loading...</Text>} // 如果懒加载失败则显示 fallback
                  factory={() => import('../screen/TabScreen')} // 通过懒加载方式加载组件
                />
              );
            }}
          </Tab.Screen>
          <Tab.Screen name="TabB">
            {/* ... */}
          </Tab.Screen>
        </Tab.Navigator>
      );
    }
    // Stack 路由
    <RootStack.Screen name="StackScreen">
      {(props) => {
        return (
          <LazyScreen
            {...props}
            pageName="Home"
            fallback={<Text>Loading...</Text>}
            factory={() => import('../screen/StackScreen')}
          />
        );
      }}
    </RootStack.Screen>

    2. 在页面中绑定 focus 和 blur 事件

    export default class StackScreen extends React.Component<Props> {
      unsubscribeFocus: any;
      unsubscribeBlur: any;
    
      componentDidMount() {
        // 绑定事件
        this.unsubscribeFocus = this.props.addFocusListener(() => {
          console.info(' focus');
        });
    
        this.unsubscribeBlur = this.props.addBlurListener(() => {
          console.info(' blur');
        });
      }
    
      componentWillUnmount() {
        // 解绑事件
        this.unsubscribeFocus();
        this.unsubscribeBlur();
      }
    
      render() {
        return (
          <SafeAreaView
            // eslint-disable-next-line react-native/no-inline-styles
            style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}
          > 
          </SafeAreaView>
        );
      }
    }

    3. 在组件中监听路由事件

    您可以通过react context机制在页面的任何子组件中监听 focus blur 事件

    import { AddListenerContext } from 'react-navigation-lazy-screen';
    
    class InnerComp extends React.PureComponent<{ pageName: string }> {
      unsubscribeFocus: any;
    
      static contextType = AddListenerContext;
    
      componentDidMount() {
        this.unsubscribeFocus = this.context.addListener('focus', () => {
          console.info(this.props.pageName + ' InnerComp focus');
        });
    
        // same for blur
      }
    
      componentWillUnmount() {
        this.unsubscribeFocus();
      }
    
      render() {
        return <Text>{'The ' + this.props.pageName + ' InnerComp'}</Text>;
      }
    }

    Example

    请参考 example 文件夹

    License

    MIT

    Install

    npm i react-navigation-lazy-screen

    DownloadsWeekly Downloads

    1

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    36.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • billl89