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
相关产品推荐
相关产品推荐

