React Native Reanimated中如何维持百分比尺寸子组件布局？

问题根源 #

你当前的实现中，Animated.View默认采用内容自适应的布局模式，当子组件使用百分比宽高时，会以这个包裹层的尺寸为参考基准，而非外层的祖父组件，最终导致子组件的百分比尺寸计算为0。

解决方案一：让Animated.View占满父容器空间 #

给Animated.View添加占满父容器的样式，让它的尺寸和祖父组件保持一致，这样子组件的百分比宽高就会基于这个包裹层（等同于基于祖父组件）。

修改后的代码：

export function AnimationWrapper(props){
    const alphas = [];
    
    function createAnimatedStyle(sharedValue) {
        return useAnimatedStyle(() => {
            return {
                transform: [{translateY: -sharedValue.value * 255}],
                opacity: 1 - Math.abs(sharedValue.value),
            };
        })
    }
    
    function renderChildren(){
        return props.children
            .map((child, index) => {
                if(!child) return null;
                const alpha = useSharedValue(-1);
                alphas.push(alpha);
                return(
                    <Animated.View 
                        key={index} 
                        style={[
                            { flex: 1, width: '100%', height: '100%' }, // 新增占满父容器的样式
                            createAnimatedStyle(alpha)
                        ]}
                    >
                        {React.cloneElement(child)}
                    </Animated.View>
                );
            });
    }

    // 后续可操作alphas数组执行动画...

    return renderChildren();
}

注意：如果祖父组件不是flex布局，可根据实际情况调整Animated.View的样式，比如设置固定百分比宽高或者继承父容器的尺寸。

解决方案二：直接给子组件注入动画样式（无需额外包裹层） #

跳过Animated.View包裹，直接将动画样式合并到子组件的原有style中，完全避免新增布局层级带来的影响。

修改后的代码：

export function AnimationWrapper(props){
    const alphas = [];
    
    function createAnimatedStyle(sharedValue) {
        return useAnimatedStyle(() => {
            return {
                transform: [{translateY: -sharedValue.value * 255}],
                opacity: 1 - Math.abs(sharedValue.value),
            };
        })
    }
    
    function renderChildren(){
        return props.children
            .map((child, index) => {
                if(!child) return null;
                const alpha = useSharedValue(-1);
                alphas.push(alpha);
                // 克隆子组件并合并动画样式
                return React.cloneElement(child, {
                    style: [
                        child.props.style,
                        createAnimatedStyle(alpha)
                    ]
                });
            });
    }

    // 后续可操作alphas数组执行动画...

    return renderChildren();
}

这种方案更简洁，直接让子组件自身拥有动画属性，完全不会影响原有的布局逻辑，适合大多数场景。

补充说明 #

如果子组件本身不是View类组件（比如Text、Image或自定义组件），方案二依然有效，只要子组件支持接收style属性并传递给底层原生视图即可。

内容的提问来源于stack exchange，提问作者Saphirah