native下拉图片放大 react_RN下拉图片放大 - Chason-洪的个人空间 - OSCHINA - 中文开源技术交流社区...
修改于第三方插件https://github.com/lelandrichardson/react-native-parallax-view
为何修改?
官方的原效果:
实际我所需要的效果:
如上图所示,在开发过程中我们遇到了以下问题:
背景中的内容部分(如图红色框)没有完全在背景容器中的时候,其是通过margin等方法将部分露出来,在向下滚动过程中,我发现背景中的内容部分(如图红色分)会渐渐透明度为0,透明度为0后露出下面的空白一大片的空间,且背景图片上移动的速度比下面页面慢,导致造成的效果仿佛是下面的页面部分把背景给盖上去了,十分丑陋,而且超出头部背景区域后无法点击,如上图第二图所示
修改了哪些
去掉了透明度
修改了移动的速度
去掉了渲染头部的容器,否则超出背景区域外无法点击
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
Dimensions,
StyleSheet,
View,
ScrollView,
Animated,
} = ReactNative;
/**
* BlurView temporarily removed until semver stuff is set up properly
*/
//var BlurView /* = require('react-native-blur').BlurView */;
var ScrollableMixin = require('react-native-scrollable-mixin');
var screen = Dimensions.get('window');
import PropTypes from 'prop-types';
var ScrollViewPropTypes = ScrollView.propTypes;
var createReactClass=require("create-react-class");
var ParallaxView = createReactClass({
mixins: [ScrollableMixin],
propTypes: {
...ScrollViewPropTypes,
windowHeight: PropTypes.number,
backgroundSource:PropTypes.oneOfType([
PropTypes.shape({
uri: PropTypes.string,
}),
// Opaque type returned by require('./image.jpg')
PropTypes.number,
]),
header:PropTypes.node,
blur: PropTypes.string,
contentInset:PropTypes.object,
},
getDefaultProps: function () {
return {
windowHeight: 300,
contentInset: {
top: screen.scale
}
};
},
getInitialState: function () {
return {
scrollY: new Animated.Value(0)
};
},
/**
* IMPORTANT: You must return the scroll responder of the underlying
* scrollable component from getScrollResponder() when using ScrollableMixin.
*/
getScrollResponder() {
return this._scrollView.getScrollResponder();
},
setNativeProps(props) {
this._scrollView.setNativeProps(props);
},
renderBackground: function () {
var { windowHeight, backgroundSource, blur } = this.props;
var { scrollY } = this.state;
if (!windowHeight || !backgroundSource) {
return null;
}
return (
style={[styles.background, {
height: windowHeight,
transform: [{
translateY: scrollY.interpolate({
inputRange: [ -windowHeight, 0, windowHeight],
//原本是-windowHeight/3
outputRange: [windowHeight/2, 0, -windowHeight]
})
},{
scale: scrollY.interpolate({
inputRange: [ -windowHeight, 0, windowHeight],
outputRange: [2, 1, 1]
})
}]
}]}
source={backgroundSource}>
{/*
!!blur && (BlurView || (BlurView = require('react-native-blur').BlurView)) &&
*/}
);
},
renderHeader: function () {
var { windowHeight, backgroundSource } = this.props;
var { scrollY } = this.state;
if (!windowHeight || !backgroundSource) {
return null;
}
return (
position: 'relative',
height: windowHeight,
// opacity: scrollY.interpolate({
// inputRange: [-windowHeight, 0, windowHeight / 1.2],
// outputRange: [1, 1, 0]
// }),
}}>
{this.props.header}
);
},
render: function () {
var { style, ...props } = this.props;
return (
{/*{this.renderBackground()}以前的*/}
{this.props.header} {/*修改后的*/}
ref={component => { this._scrollView = component; }}
{...props}
style={styles.scrollView}
onScroll={
Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY }}}])
}
scrollEventThrottle={16}>
{this.renderHeader()}
{/**/}
{this.props.children}
{/**/}
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
borderColor: 'transparent',
},
scrollView: {
backgroundColor: 'transparent',
},
background: {
position: 'absolute',
backgroundColor: '#2e2f31',
width: screen.width,
resizeMode: 'cover'
},
blur: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: 'transparent',
},
content: {
shadowColor: '#222',
shadowOpacity: 0.3,
shadowRadius: 2,
backgroundColor: '#fff',
flex: 1,
flexDirection: 'column'
}
});
export default ParallaxView;
native下拉图片放大 react_RN下拉图片放大 - Chason-洪的个人空间 - OSCHINA - 中文开源技术交流社区...相关推荐
- java下拉框及响应函数_MVC 实现下拉框 - osc_88wjsceo的个人空间 - OSCHINA - 中文开源技术交流社区...
MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的 这是一个下拉框: @Html.DropDownList("sel ...
- html瀑布流下拉刷新,瀑布流下拉刷新 - osc_1wnye1so的个人空间 - OSCHINA - 中文开源技术交流社区...
知识点:使用瀑布流,实现数据列表的下拉刷新 (1)引入waterfall.js,jquery.imageload.js,handlebars.js三个js文件 (2)前端页面 {{#waterfall ...
- ji计算机组成原理第五版,计算机组成原理(下) - osc_6ls9vwji的个人空间 - OSCHINA - 中文开源技术交流社区...
第9章 控制单元的功能测试 1单选(1分) 下列说法错误的是_C__. 得分/总分 A. 机器周期.节拍(状态)组成了多级时序系统. B. 机器周期可看做是所有指令执行过程中的一个基准时间,机器周期取 ...
- java获取一个目录下所有字谜_Java 猜字谜游戏 - osc_4jkldo6l的个人空间 - OSCHINA - 中文开源技术交流社区...
package fundmental_excise6; import java.util.Arrays; import java.util.Scanner; /** * @author : jeasi ...
- linux下安装EDK2开发环境,EDK2开发环境搭建 - osc_y9wmeuxa的个人空间 - OSCHINA - 中文开源技术交流社区...
EDK2开发环境搭建 来源 https://blog.csdn.net/rikeyone/article/details/80759724 EDK2全称为"uEFI Development ...
- local多个 lua_lua实现多继承 - 达拉崩吧冬的个人空间 - OSCHINA - 中文开源技术交流社区...
lua对于面向对象的支持主要通过table来实现,每个table都是一个对象,对于继承,lua有元表的机制,通过setmetatble()可以来修改元表, #元表是什么? 元表其实就是在本身找不到的东 ...
- linux内核替换图片,linux内核替换 - magic_吕伟的个人空间 - OSCHINA - 中文开源技术交流社区...
1)编译内核: #make bzImage 内核编译成功后,会在源码树根目录即linux-3.12.5/arch/x86_64/boot/目录中生成一个新内核的映像文件bzImage. 注:对于大内核 ...
- php实现图片的翻滚,css实现图片滚动 - 我是希希呀的个人空间 - OSCHINA - 中文开源技术交流社区...
.box { width: 440px; white-space: nowrap; overflow: auto; scroll-snap-type: x mandatory; } .box img ...
- 京东云宙斯上传单张图片php,单张图片上传源码 - 茄子何的个人空间 - OSCHINA - 中文开源技术交流社区...
//控制允许上传的图片类型和大小 if ((($_FILES["fctupian"]["type"] == "image/gif") || ...
最新文章
- http 权威指南 目录
- 2019年中国智能制造的十大发展关键点
- Flask入门之Virtualvenv的安装及使用(windows)
- 取消Ajax请求 || Ajax重复请求问题
- 我的世界minecraft-Python3.9编程(1)-开发环境配置(1)
- HTML中引入CSS的三种方式——响应式Web系列学习笔记
- Redis 数据结构与内存管理策略(上)
- R开发(part2)--R语言中的数学计算
- 刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!
- 四叶草Clover配置器:Clover Configurator for Mac
- 【数据库】数据库系统
- 一种基于SoC和阿里云的智能家居系统设计方案_家电研究报告
- 神舟战神G8-CA7NP怎么样?测评值得买吗?
- ArcGIS JS API实现地图场景视频融合
- 软件工程领域 相关概念
- uni-app - 幸运抽奖圆形大转盘插件组件(支持后端接口确定最终奖品,可自定义轮盘宽高、颜色、字号、按钮等等,全端兼容代码干净整洁无 BUG,官方最好用的营销页面抽奖转盘源码)老虎机九宫格式抽奖机
- 【 Python 中 int 用法详解】(转载)
- 阿里云服务器漏洞phpmyadmin CVE-2016-6617解决方法
- 2020赚钱机会总结,拾元富另附10个副业赚钱必备的工具与平台,看看你到底错过了多少钱!
- RF射频卡的介绍与与手机NFC的通信