React Native 重新激活测量视图扁平化

Question

我知道视图扁平化存在问题，可以在该线程下找到https://github.com/software-mansion/react-native-reanimated/issues/3188但对我来说，措施不起作用，尽管应用解决方案中提到的道具。 我有一个像这样的简单组件：

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>
  );
};

如你所见，我既有 style prop 又有可折叠 false，尽管如此，我在控制台中收到警告说

“[Reanimated] 带有标签 157 的视图在 Android 上进行视图扁平化。要禁用视图扁平化，请在此组件上设置

collapsable={false}

。”

从测量返回的值首先为 null，然后在 ios 上，我得到结果，但在 android 上，我收到此警告，并且它始终为 null。我注意到，如果我在示例中的 styles.wrapper 中添加position: 'relative'，我在 ios 上也总是得到 null，这是我不知道如何正确使用它是这个函数的错吗？正在使用 onLayout？

另外，measure函数的返回类型是any，这不是我第一个遇到这个问题的项目，是不是我用错了？我检查了打字，它应该返回MeasuredDimensions

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

我一直都收到。感谢您的帮助。

Answer 1

首先添加检查以查看引用是否正确填充。

const aStyles = useAnimatedStyle(() => {
    if (aRef && aRef.current) {
        const measured = measure(aRef);
        console.log({ measured });
        return {
           top: 10,
        };
    }
  });