react-native-parallax-scroll-view 试用

最新推荐文章于 2024-06-23 09:44:03 发布

jiao_0

最新推荐文章于 2024-06-23 09:44:03 发布

阅读量1.5k

点赞数

文章标签：页面拉伸Title头部渐出渐隐效果

本文链接：https://blog.csdn.net/qq_34619754/article/details/83446656

版权

本文介绍了如何使用 react-native-parallax-scroll-view 插件来实现页面上滑时头部图片和文字渐隐，导航栏渐出的效果。通过npm安装插件后，设置滚动事件以达到所需动画效果。

摘要由CSDN通过智能技术生成

页面头部渐隐效果实现(不会整动态图，就将就着记录了。。。。)：

导入ParallaxScrollView 插件 npm install react-native-parallax-scroll-view
–save

'use strict';
import React, {PureComponent} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    ImageBackground,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import ParallaxScrollView from 'react-native-parallax-scroll-view';
let {width, height} = Dimensions.get('window');

在这里插入图片描述
往上滑动头部的图片和文字的渐隐，导航栏渐出到完全显示，

 const ScrollList = (props) => {
            return (
                <View
                    style={
  {alignItems:'center',flexDirection:'row',justifyContent:'space-between',padding:10,backgroundColor:'#fff',borderBottomColor:'#efefef',borderBottomWidth:1}}>
                    <View style={
  {alignItems:'center'}}>
                        <Text style={
  {}}>借款</Text>
                        <Text style={
  {marginTop:5}}> 93,943.44</Text>
                    </View>
                    <Text style={
  {fontSize:15}}>+903.09 USDT</Text>