Ios 将本机动画边框半径、宽度和粘性反应到导航栏
当用户向下滚动页面时，需要一些帮助来设置“共享/收藏栏”边框半径的动画。从边界半径“25”到边界半径“0” 在设置边界半径动画的同时，当用户向下滚动足够远并粘到导航栏时，宽度必须延伸到屏幕边缘 目前，我已经尝试实现translateX和/或translateY、scaleX等转换，但它们的效果与我在这里尝试实现的效果相差甚远 这是我目前的代码Ios 将本机动画边框半径、宽度和粘性反应到导航栏,ios,reactjs,react-native,Ios,Reactjs,React Native,当用户向下滚动页面时，需要一些帮助来设置“共享/收藏栏”边框半径的动画。从边界半径“25”到边界半径“0” 在设置边界半径动画的同时，当用户向下滚动足够远并粘到导航栏时，宽度必须延伸到屏幕边缘 目前，我已经尝试实现translateX和/或translateY、scaleX等转换，但它们的效果与我在这里尝试实现的效果相差甚远 这是我目前的代码 state = { scrollY: new Animated.Value(0), }; render() { const { n
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>
)
}
状态={
滚动：新的动画值（0），
};
render（）{
const{navigation}=this.props；
const-articleContent=navigation.getParam（'itemContent'，'NO-CONTENT'）；
const styledContent=articleContent.concat（css）；
const-articleImage=navigation.getParam（'itemage'，'NO-IMAGE'）；
const-articletTitle=navigation.getParam（'itemTitle'，'NO-NAME'）；
返回(
分享
最喜欢的
{articleTitle}
{/*了解如何向网页添加字体*/}
)
}