react-native 滚动头部置顶

React 前端之家
前端之家收集整理的这篇文章主要介绍了react-native 滚动头部置顶，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

/**
* Create by lutn on 2018-04-17
*
*/
'use strict';

import React,{ Component } from 'react'
import {
Text,
View,
BackHandler,
ScrollView,
StyleSheet,
AlertIOS,
RefreshControl,
TouchableOpacity,
Image,
TextInput,
Platform,
Dimensions,
ActivityIndicator,
Animated
} from 'react-native'
import px2dp from '../../utils/Px2dp'

const isIOS = Platform. OS == "ios"
const { width,height } = Dimensions. get( 'window')
const headH = px2dp( isIOS? @H_404_148@140: @H_404_148@120)
const InputHeight = px2dp( @H_404_148@28)

export default class HomePage3 extends Component {
constructor( props){
super( props)
this. state = {
location: "三里屯SOHO",
scrollY: new Animated. Value( @H_404_148@0),
searchView: new Animated. Value( @H_404_148@0),
modalVisible: false,
searchBtnShow: true,
isRefreshing: false
}

this. SEARCH_Box_Y = px2dp( isIOS? @H_404_148@48: @H_404_148@43)
this. SEARCH_FIX_Y = headH- px2dp( isIOS? @H_404_148@64: @H_404_148@44)
this. SEARCH_KEY_P = px2dp( @H_404_148@58)
this. SEARCH_DIFF_Y = this. SEARCH_FIX_Y- this. SEARCH_Box_Y
}
componentDidMount(){

BackHandler. addEventListener( 'hardwareBackPress',function () {
BackHandler. exitApp( @H_404_148@0)
return true
})
}
_renderHeader(){
let searchY = this. state. scrollY. interpolate({
inputRange: [ @H_404_148@0,this. SEARCH_Box_Y,this. SEARCH_FIX_Y,this. SEARCH_FIX_Y],
outputRange: [ @H_404_148@0,@H_404_148@0,this. SEARCH_DIFF_Y,this. SEARCH_DIFF_Y]
})
let lbsOpaticy = this. state. scrollY. interpolate({
inputRange: [ @H_404_148@0,this. SEARCH_Box_Y],
outputRange: [ @H_404_148@1,@H_404_148@0]
})
let keyOpaticy = this. state. scrollY. interpolate({
inputRange: [ @H_404_148@0,this. SEARCH_KEY_P],@H_404_148@1,@H_404_148@0]
})
return (
< View style= { styles. header } >
< Animated.View style= {[ styles. lbsWeather,{ opacity: lbsOpaticy}] } >
< Text >头 </ Text >
</ Animated.View >
< Animated.View style= {{
marginTop: px2dp( @H_404_148@15),
transform: [{
translateY: searchY
}]} } >
< Text >中 </ Text >
</ Animated.View >
< Animated.View style= {[ styles. keywords,{ opacity: keyOpaticy}] } >
< Text >底 </ Text >
</ Animated.View >
</ View >
)
}
_renderFixHeader(){
let showY = this. state. scrollY. interpolate({
inputRange: [ @H_404_148@0,
outputRange: [- @H_404_148@9999,- @H_404_148@9999,@H_404_148@0]
})
return (
< Animated.View style= {[ styles. header,{
position: "absolute",
left: @H_404_148@0,
right: @H_404_148@0,
top: @H_404_148@0,
bottom: @H_404_148@0,
height: px2dp( isIOS? @H_404_148@64: @H_404_148@44),
paddingTop: px2dp( isIOS? @H_404_148@25: @H_404_148@10),
transform: [
{ translateY: showY}
]
}] } >
< Text >中 </ Text >
</ Animated.View >
)
}

_onRefresh(){
this. setState({ isRefreshing: true});
setTimeout(() => {
this. setState({ isRefreshing: false});
},@H_404_148@2000)
}
render(){
return (
< View style= {{ flex: @H_404_148@1,backgroundColor: "#f3f3f3"} } >
< ScrollView
onScroll= { Animated. event(
[{ nativeEvent: { contentOffset: { y: this. state. scrollY}}}]
) }
scrollEventThrottle= { @H_404_148@16 }
refreshControl= {
< RefreshControl
refreshing= {this. state. isRefreshing }
onRefresh= {this. _onRefresh. bind( this) }
colors= {[ '#ddd','#0398ff'] }
progressBackgroundColor= "#ffffff"
/>
}
>
{this. _renderHeader() }
< View style= {{ backgroundColor: "#fff",paddingBottom: @H_404_148@10} } >
< Text >头 </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >

< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >

< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >

< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >

< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >sdlkfsdklsfkldflskdsdlkkds </ Text >
< Text >底部 </ Text >
</ View >
</ ScrollView >
{this. _renderFixHeader() }
</ View >
)
}
}

const styles = StyleSheet. create({
header: {
backgroundColor: "#0398ff",
height: headH,
paddingTop: px2dp( isIOS? @H_404_148@30: @H_404_148@10),
paddingHorizontal: @H_404_148@16
},

lbsWeather: {
height: InputHeight,
overflow: "hidden",
flexDirection: "row",
justifyContent: "space-between"
},



keywords: {
marginTop: px2dp( @H_404_148@14),
flexDirection: "row"
},
})


'use strict';
import { Dimensions} from 'react-native'
const deviceH = Dimensions. get( 'window'). height
const deviceW = Dimensions. get( 'window'). width
const basePx = @H_404_148@375
export default function px2dp( px) {
return px * deviceW / basePx
}
原文链接：https://www.f2er.com/react/301460.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作