ios - React-Native 动画边框半径、宽度和对导航栏的粘性

问题描述

当用户向下滚动页面时，需要一些帮助来为“共享/收藏栏”的边框半径设置动画。从“25”的边界半径到“0”的边界半径。

除了动画边框半径外，当用户向下滚动足够远并粘在导航栏上时，宽度必须拉伸到屏幕边缘。

目前，我已经尝试实现诸如 translateX 和/或 translateY、scaleX 之类的转换，但它们几乎没有我在这里尝试实现的相同效果。

这是我目前的代码，

state = {
    scrollY: new Animated.Value(0),
};

render() {

    const { navigation } = this.props;
    const articleContent = navigation.getParam('itemContent', 'NO-CONTENT');
    const styledContent = articleContent.concat(css);
    const articleImage = navigation.getParam('itemImage', 'NO-IMAGE');
    const articleTitle = navigation.getParam('itemTitle','NO-NAME');

    return(
        <SafeAreaView style={styles.articleRowContainer}>

            <StatusBar barStyle="light-content" />

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

                <ImageOverlay source={{uri: articleImage}}
                style={styles.articleImageStyling}
                overlayAlpha={0}
                contentPosition="bottom" />

                <Animated.View style={{
                    position: 'absolute',
                    top: 275,
                    left: 50,
                    right: 50,
                    height: 50,                     
                    borderRadius: 25,
                    backgroundColor: '#c09d6b',
                    //transform: [{scale: animationStyle }],
                    }}>

                    <Image source={require('./../../assets/images/1x/share_variant.png')} 
                    style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 20,
                    }} />

                    <Text
                        style={{
                            position: 'absolute',
                            top: 15,
                            right: 0,
                            bottom: 0,
                            left: 50,
                            fontFamily: 'quicksand-medium',
                            fontSize: 16,
                        }}
                    >
                        SHARE
                    </Text>

                    <Image source={require('./../../assets/images/1x/favourite_border_black.png')} 
                    style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 185,
                    }} />

                    <Text style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 215,
                        fontFamily: 'quicksand-medium',
                        fontSize: 16,
                    }}
                    >
                        FAVOURITE
                    </Text>

                </Animated.View>



                <View style={styles.articleTitleContainer}>

                    <Text
                        style={styles.articleTitle}
                    >
                        {articleTitle}
                    </Text>

                </View>
                {/* Figure out how to add fonts to webpage */}
                <View style={styles.webViewContainer}>                      
                    <HTML html={styledContent} imagesMaxWidth={Dimensions.get('window').width}/>
                </View>
            </Animated.ScrollView>              
        </SafeAreaView>
)
}

谢谢你

标签： iosreactjsreact-native

ios - React-Native 动画边框半径、宽度和对导航栏的粘性

问题描述

解决方案

推荐阅读