在 React Native Reanimated Wrapper 中维护基于百分比的子级布局

Question

我正在开发一个包装组件，该组件应该使用

React Native Reanimated

为子组件设置动画。

我当前的方法是克隆每个子项并将其包装成

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;
                alphas.push(useSharedValue(-1));
                return(
                    <Animated.View key={index} style={[createAnimatedStyle(alphas[alphas.length-1])]}>
                        {React.cloneElement(child)}
                    </Animated.View>
                );
            });
    }

//Later we can animate the alphas array...

    return({renderChildren()});
}

如果孩子们有绝对尺寸，这很有效。 我的挑战是维护具有基于百分比的宽度和高度的子组件的布局。

<Animated.View>

组件根据子组件调整其大小。因此，如果我们尝试使用百分比使子项的宽度/高度相对，宽度/高度将导致 0。

从布局的角度来看，我希望子级忽略

Animated.View

包装器并将其布局调整为祖父母。因此，即使我的功能组件包装了每个子组件，布局也应该保持不变。

那么，如何在

Animated.View

中的

React Native Reanimated

内维护具有基于百分比尺寸的子组件的布局？或者还有其他方法可以让我的孩子充满活力吗？

Answer 1

您的 AndroidManifest 似乎缺少一些 权限。

<uses-permission android:name="android:usesCleartextTraffic" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />