Question

是否可以扩展ReactNative以允许使用本机驱动程序对元素位置进行动画处理。

尽管您可以通过translateX设置动画，但在这种情况下，应通过更改元素的左右样式参数来减小元素的大小。

本机动画不支持left，right，marginLeft，marginRight，paddingLeft和paddingRight。有什么办法可以解决这个问题，或者有一些新颖的想法涉及缩放而不会扭曲元素。

export class ViewScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            scrollY: new Animated.Value(0)
        }
    }

    render() {
        var VSStickyElementsMargin = this.state.scrollY.interpolate({
            inputRange: [0, 44],
            outputRange: [0, 4]
        });

    return (

        <Animated.ScrollView
            onScroll={Animated.event([
                { nativeEvent: { contentOffset: { y: this.state.scrollY } }}],
                { useNativeDriver: true }
            )}>

            <Animated.View style={[
                {left: VSStickyElementsMargin},
                {right: VSStickyElementsMargin}
            ]}>
                <Text>I am content that is not to become distorted</Text>
            </Animated.View>

        </Animated.ScrollView>
        )
    }
}

Answer 1

无法对非变换或不透明的属性使用本机驱动程序。

如果我了解您要正确实现的目标，则应使用translateX将元素移出其父元素，并在需要时对其进行动画处理，使用隐藏在父元素上的溢出。

或者，如果这不是您想要的效果，请尝试查看layoutanimation api，因为与使用非转换/不透明度属性设置动画相比，使用它来驱动值可以获得更好的性能。

使用useNativeDriver反应本机动画位置（左和右）

1 个答案: