You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native Reanimated measure函数视图扁平化问题及类型异常求助

React Native Reanimated measure函数相关问题

问题1:视图扁平化警告未消除,measure函数跨端表现异常

已知React Native Reanimated存在视图扁平化问题,即使给Animated.View设置了collapsable={false},控制台仍弹出警告:

"[Reanimated] The view with tag 157 gets view-flattened on Android. To disable view-flattening, set collapsable={false} on this component."

同时measure函数表现异常:

  • 初始返回值为null,iOS后续能获取有效结果,但Android始终返回null
  • 若给外层容器样式添加position: 'relative',iOS端的measure返回值也会一直为null

当前使用的组件代码如下:

import { StyleSheet } from 'react-native';

import Animated, {
  measure,
  useAnimatedRef,
  useAnimatedStyle,
} from 'react-native-reanimated';

import { ToastConfig } from './Toast.types';
import { BaseToast } from './variants/BaseToast';

interface ToastComponentProps {
  data: ToastConfig;
}

const styles = StyleSheet.create({
  wrapper: {
    position: 'relative',
    zIndex: 10,
  },
});

export const ToastComponent: React.FC<ToastComponentProps> = ({ data }) => {
  const aRef = useAnimatedRef<Animated.View>();
  const aStyles = useAnimatedStyle(() => {
    const measured = measure(aRef);
    console.log({ measured });
    return {
      top: 10,
    };
  });
  return (
    <Animated.View style={[styles.wrapper, aStyles]} ref={aRef} collapsable={false}>
      <BaseToast data={data} />
    </Animated.View>
  );
};

想确认这是使用方式错误,还是函数本身存在问题,是否应该改用onLayout替代?

问题2:measure函数类型定义不生效

根据官方类型定义,measure函数的返回值应为MeasuredDimensions | null:

export function measure<T extends Component>(
  ref: RefObject<T>
): MeasuredDimensions | null;

但实际使用中返回类型始终为any,这不是第一次遇到该问题,是否是使用方式有误?


内容的提问来源于stack exchange,提问作者seven

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 13:50:24