脚本宝典收集整理的这篇文章主要介绍了react-native仿京东首页搜索栏联动效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
必备第三方库:react-native-reanimated
布局下方是滚动区,上方看做一个headerBar,滚动的过程中 headerBar是固定的且随滚动距离变化高度,且搜索栏会伸缩向上。
我试过这样做:
<View>
<View>
{/*headerBar*/}
</View>
{/*scroll*/}
<ScrollView>
</ScrollView>
</View>
我的一次次尝试告诉我这样是不可以的,我通过ScrollView onScroll回调 其中配合使用了动画库reanimated的强大hook useAnimatedScrollHandler,依然做出来效果不堪入目,抖动剧烈。
那怎么办? 换思路? 固定区域不放外面,放哪? 放scrollView? 回想,放进去也不是固定不了,想想上一篇仿飞猪效果不也是放滚动区内部了?撸起袖子干!!!
然后就是处理我们的headerBar,先看下图
我圈住的部分就是headerBar,这里我们把搜索栏 放置在跟headerBar同一级下,接下来,在滚动的时候,需要做3件事注意⚠️:这里我们需要设置父级alignItems: “flex-start”,这样你在变化宽度的时候,searchbar就是按照父级的约束去改变,android中是通过约束布局去对左右相对约束去做的,我们rn目前只能这样子做,相对来说,android更加规范!!!
贴代码:
const JdScrollPage = props => {
const { width } = useWindowDimensions();
const translationY = useSharedValue(0);
const maxWid = width - 100 - 20;
const scrollHandler = useAnimatedScrollHandler((event) => {
translationY.value = event.contentOffset.y;
}, []);
const headerViewAni = useAnimatedStyle(() => {
const val = width - 20 - translationY.value;
return {
width: (val <= maxWid) ? maxWid : val,
};
}, []);
const fixedView = useAnimatedStyle(() => {
return {
transform: [
{
translateY: translationY.value,
},
],
};
});
const parentBlackView = useAnimatedStyle(() => {
const val = 100 - translationY.value / 8;
return {
height: val <= 50 ? 50 : val,
};
});
return (
<View style={{ flex: 1 }}>
<Animated.ScrollView onScroll={scrollHandler}>
<Animated.View style={[{ alignItems: "flex-start",zIndex:10 }, fixedView]}>
<Animated.View style={[styles.headerLayout, parentBlackView]}>
<View style={styles.logoLayout}>
<Image source={require('./logo.jpg')} style={styles.logoPic} resizeMode={"contain"}/>
</View>
<View style={styles.rightLayout}>
<Text>this is layout</Text>
</View>
</Animated.View>
{/*search bar*/}
<Animated.View style={[styles.search,{width:width-20}, headerViewAni]}>
<Text>请输入搜索内容</Text>
</Animated.View>
</Animated.View>
{/*scroll content*/}
<View style={{ backgroundColor: "#ccc", height: 80 }}>
<Text>hello1</Text>
</View>
<View style={{ backgroundColor: "#ccc", height: 80 }}>
<Text>hello</Text>
</View>
<View style={{ backgroundColor: "#ccc", height: 80 }}>
<Text>hello</Text>
</View>
</Animated.ScrollView>
</View>
);
};
如果想改成,美团,拼多多的那种搜索栏效果,我们只需要把
alignItem:“flex-start” 改成“center”,就可以实现基本一致的效果,你可以根据实际需求稍加调整,就可以完美实现这个交互效果了怎么样,rn现在去做这些东西还是比较简单的吧,欢迎小伙伴们给我留言评论,互相学习!
以上是脚本宝典为你收集整理的react-native仿京东首页搜索栏联动效果全部内容,希望文章能够帮你解决react-native仿京东首页搜索栏联动效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。