measure

measure的使用需要使用ref获取View（或其他原生RN容器，这里只能是原生RN的容器）引用，然后调用上面的measure方法，这个方法接受一个回调函数，参数分别为 x、y、width、height、pageX、pageY参数（参数按照顺序列举）。

但是如果元素实际未渲染（例如Flatlist中不在屏幕中没有渲染的元素），则无法获得它的位置。

import { useRef, FC } from 'react';
import { ScrollView, View, useWindowDimensions } from 'react-native';

export const TextComp: FC = (props) => {
  const viewRef = useRef<View>(null);
  const { width: windowHeight } = useWindowDimensions();
  const handleScroll = () => {
    viewRef.current?.measure?.((x, y, width, height, pageX, pageY) => {
      if (pageY < windowHeight) {
        console.log('View Appears');
        // ...
      }
    });
  }
  
  return (
    <ScrollView
      style={{ paddingVertical: 1000 }}
      handleScroll={handlesScroll}
      scrollEventThrottle={16}
    >
      <View ref={useRef}> ... </View>
    </ScrollView>
  );
}

可能遇到的问题

在安卓中，一个View如果只用来包含子元素，而不存在任何跟空间有关的属性（例如style、className、onLayout等），那么这个View会被安卓RN底层优化，从而导致这个View在Component Tree上并没有挂载。虽然不会影响页面视觉效果，但是会导致measure返回不可控的数值。

为了防止容器被优化，需要用到 collapsable 属性，例如下面的代码：

import { useRef, FC } from 'react';
import { ScrollView, View, useWindowDimensions } from 'react-native';

export const TextComp: FC = (props) => {
  const viewRef = useRef<View>(null);
  const { width: windowHeight } = useWindowDimensions();
  const handleScroll = () => {
    viewRef.current?.measure?.((x, y, width, height, pageX, pageY) => {
      if (pageY < windowHeight) {
        console.log('View Appears');
        // ...
      }
    });
  }
  
  return (
    <ScrollView
      style={{ paddingVertical: 1000 }}
      handleScroll={handlesScroll}
      scrollEventThrottle={16}
    >
      <View 
        ref={useRef}
        collapsable={false} // <---
      > ... </View>
    </ScrollView>
  );
}

除了上述方法外，使用Animated.View、为View添加style属性或者onLayout回调都会防止它被安卓RN优化掉。

参考链接：software-mansion/react-native-reanimated#3188

不过最近因为有一个讲座报名小程序的项目，我要写一个后台，因为时间短（任务不重），规模也不大，就想到了用Vue，不过搭建项目的过程如果要每次都自己操作一次的话，就太慢了，于是根据平常常用的东西，制作了一个整合npm工具包：ovx。

使用方法也非常的简单，下面两个方法都可以：

// npx
npx ovx@latest

// npm global
npm i ovx@latest -g // pnpm also work
ovx

目前支持Vue 3 + Vite 2 + vue router 4为基础，Ant Design/Element Plus为UI库的模板，支持SFC写法及其的自动导入，即可以不使用import语句直接使用UI库的组件；也支持TSX（defineComponent或者函数式组件，不过函数式组件传递给vue-router时会出现一点点问题）。

至于为什么不使用普通JavaScript而一定要用TypeScript，因为TS很香，写了TS就不想写JS了，不然完全不知道某个对象具体有什么属性方法。

更多的模板还在添加，欢迎大家来Github提建议或问题。

最后，这个包也使用了Github Action来保证可用性及更新依赖，不得不说Github Action真的是太方便了，现在在Github发布一个Release就能自动发布最新包，非常的方便。