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