react-native吸顶效果
从网络上搜到的，方便自己下次阅读
展示页面
import React from 'react';
import ScrollableTabView, {ScrollableTabBar,} from 'react-native-scrollable-tab-view';
import * as ScreenUtil from './ScreenUtil';
import {
View,
StyleSheet,
Text,
ImageBackground,
Image,
} from 'react-native';
import TabPage from './TabPage';
export default class IndexScreen extends React.Component {
static propTypes = {};
static defaultProps = {};
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<View style={styles.container}>
{this._renderHeader()}
{this.renderScrollTab()}
</View>
)
}
onScroll = (e) => {
let {x, y} = e.nativeEvent.contentOffset;
console.log(y);
if (y <= 100) {
this.refs._title.setNativeProps({
style: {
top: -y
}
});
this.refs._scrolltab.setNativeProps({
style: {
marginTop: 100 - y
}
})
} else {
this.refs._title.setNativeProps({
style: {
top: -100
}
});
this.refs._scrolltab.setNativeProps({
style: {
marginTop: 0
}
})
}
};
/**
* 渲染头部
* @private
*/
_renderHeader() {
let icon = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496299246419&di=f6d9e7d99236cb4319782d95cbd7f740&imgtype=0&src=http%3A%2F%2Fwww.pptbz.com%2FSoft%2FUploadSoft%2F200911%2F2009110521380826.jpg';
let icon2 = 'http://pic28.nipic.com/20130503/9252150_153601831000_2.jpg';
return (
<ImageBackground
ref={'_title'}
style={styles.headerContainer}
source={{uri: icon2}}>
</ImageBackground>
);
}
renderScrollTab() {
return (
<View
ref={'_scrolltab'}
style={styles.scrollTab}>
<ScrollableTabView
listKey='d' key='4'
style={{height: ScreenUtil.screenH}}
renderTabBar={() => <ScrollableTabBar/>}
>
<TabPage listKey='a' key='1' tabLabel='Tab #1' onScroll={this.onScroll}/>
<TabPage listKey='b' key='2' tabLabel='Tab #2' onScroll={this.onScroll}/>
<TabPage listKey='c' key='3' tabLabel='Tab #3' onScroll={this.onScroll}/>
</ScrollableTabView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: ScreenUtil.screenW
},
headerContainer: {
width: ScreenUtil.screenW,
height: 60,
position: 'absolute',
top: 0,
justifyContent: 'center'
},
scrollTab: {
flex: 1,
marginTop: 60
}
});
TabPage页面
import React from 'react';
import PropTypes from 'prop-types';
import {
View,
FlatList,
StyleSheet,
Text
} from 'react-native';
export default class TabPage extends React.Component {
static propTypes = {};
static defaultProps = {};
constructor(props) {
super(props);
this.state = {
data: []
}
}
/**
* 初始化了状态之后，在第一次绘制 render() 之前
* （能够使用setState()来改变属性 有且只有一次）
*/
componentDidMount() {}
_keyExtractor = (item, index) => index + '';
render() {
let a = [1, 2, 3, 4, 5, 6, 7, 8, 22, 22, 1, 1, 1, 1, 1, 1, 1];
for (let i = 0; i < 100; i++) {
a.push(i + 'a')
}
return (
<View style={{backgroundColor: 'red'}}>
<FlatList
keyExtractor={this._keyExtractor}
data={a}
renderItem={({item}) => <Text>{item}</Text>}
onScroll={this.props.onScroll}
overScrollMode={'never'}
/>
</View>
);
}
}
const styles = StyleSheet.create({});
ScreenUtil页面
import {
PixelRatio,
Dimensions,
Platform,
AsyncStorage
} from 'react-native';
export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
const fontScale = PixelRatio.getFontScale();
export let pixelRatio = PixelRatio.get();
//像素密度
export const DEFAULT_DENSITY = 2;
//px转换成dp
//屏幕尺寸修改下面的1080和1920为对应尺寸即可.
const w2 = 1080 / DEFAULT_DENSITY;
//px转换成dp
const h2 = 1920 / DEFAULT_DENSITY;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;
/**
* 设置字体的size（单位px）
* @param size 传入设计稿上的px
* @returns {Number} 返回实际sp
*/
export function setSpText(size: Number) {
let scaleWidth = screenW / w2;
let scaleHeight = screenH / h2;
let scale = Math.min(scaleWidth, scaleHeight);
size = Math.round((size * scale + 0.5));
return size / DEFAULT_DENSITY;
}
/**
* 屏幕适配,缩放size
* @param size
* @returns {Number}
*/
export function scaleSize(size: Number) {
let scaleWidth = screenW / w2;
let scaleHeight = screenH / h2;
let scale = Math.min(scaleWidth, scaleHeight);
size = Math.round((size * scale + 0.5));
return size / DEFAULT_DENSITY;
}
//时间处理
Date.prototype.format = function (format) {
let date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S+": this.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (let k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length === 1
? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
};
//获取时间差 current:1497235409744 当前时间 start:1497235419744 开始时间
export function getRemainingime(current: Number, start: Number) {
let time = start - current;
if (time < 0) {
return ["0", "0", "0", "0", "0", "0"];
}
let year = Math.floor(time / (365 * 30 * 24 * 3600 * 1000));//年
let month = Math.floor(time / (30 * 24 * 3600 * 1000));//月
let days = Math.floor(time / (24 * 3600 * 1000));//日
let temp1 = time % (24 * 3600 * 1000);
let temp2 = temp1 % (3600 * 1000);
let minutes = Math.floor(temp2 / (60 * 1000));//分
let hours = Math.floor(temp1 / (3600 * 1000));//时
let temp3 = temp2 % (60 * 1000);
let seconds = Math.round(temp3 / 1000);//秒
let strs = [year, toNormal(month), toNormal(days), toNormal(hours), toNormal(minutes), toNormal(seconds)];
return strs;//["0", "0", "2", "7", "33", "30"]0年0月2日 7时33分30秒
}
//1497235419
export function getRemainingimeDistance(distance: Number) {
let time = distance * 1000;
if (time < 0) {
return ["0", "0", "0", "0", "0", "0"];
}
let year = Math.floor(time / (365 * 30 * 24 * 3600 * 1000));//年
let month = Math.floor(time / (30 * 24 * 3600 * 1000));//月
let days = Math.floor(time / (24 * 3600 * 1000));//日
let temp1 = time % (24 * 3600 * 1000);
let hours = Math.floor(temp1 / (3600 * 1000));//时
let temp2 = temp1 % (3600 * 1000);
let minutes = Math.floor(temp2 / (60 * 1000));//分
let temp3 = temp2 % (60 * 1000);
let seconds = Math.round(temp3 / 1000);//秒
let strs = [year, toNormal(month), toNormal(days), toNormal(hours), toNormal(minutes), toNormal(seconds)];
// strs.splice(0, 1, String(Number(strs[0]) - 1970));//年
// strs.splice(1, 1, String(Number(strs[1]) - 1));
// strs.splice(2, 1, (Number(strs[2]) - 1) < 10 ? '0' + (Number(strs[2]) - 1) : String(Number(strs[2]) - 1));
// strs.splice(3, 1, (Number(strs[3]) - 8) < 10 ? '0' + (Number(strs[3]) - 8) : String(Number(strs[3]) - 8));
// strs.splice(4, 1, Number(strs[4]) < 10 ? '0' + Number(strs[4]) : String(Number(strs[4])));
// strs.splice(5, 1, Number(strs[5]) < 10 ? '0' + Number(strs[5]) : String(Number(strs[5])));
return strs;//["0", "0", "2", "7", "33", "30"]0年0月2日 7时33分30秒
}
export function toNormal(time: Number) {
return time >= 10 ? time : '0' + time;
}
//转换成日期
export function toDate(timestamp: Number, format1 = 'yyyy-MM-dd hh:mm:ss') {
try {
if (timestamp > 10000) {
let date = new Date();
date.setTime(timestamp);
return date.format(format1);//2014-07-10 10:21:12
} else {
return '';
}
} catch (erro) {
return '';
}
return '';
}
//转换成时间搓
export function toTimestamp(date: String) {
let timestamp = Date.parse(date);
return timestamp / 1000; // 1497233827569/1000
}
//CST时间=>转换成日期yyyy-MM-dd hh:mm:ss
export function getTaskTime(strDate) {
if (null == strDate || "" == strDate) {
return "";
}
let dateStr = strDate.trim().split(" ");
let strGMT = dateStr[0] + " " + dateStr[1] + " " + dateStr[2] + " " + dateStr[5] + " " + dateStr[3] + " GMT+0800";
let date = new Date(Date.parse(strGMT));
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
let minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
let second = date.getSeconds();
second = second < 10 ? ('0' + second) : second;
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
};
//1497235419
export function getRemainingimeDistance2(distance: Number) {
let time = distance;
let days = Math.floor(time / (24 * 3600 * 1000));
let temp1 = time % (24 * 3600 * 1000);
let hours = Math.floor(temp1 / (3600 * 1000));
let temp2 = temp1 % (3600 * 1000);
let minutes = Math.floor(temp2 / (60 * 1000));
if (time <= 60 * 1000) {
minutes = 1;
}
let temp3 = temp2 % (60 * 1000);
let seconds = Math.round(temp3 / 1000);
return [hours, minutes];//["0", "0", "2", "7", "33", "30"]0年0月2日 7时33分30秒
}
/**
* 判断是否为iphoneX
* @returns {boolean}
*/
export function isIphoneX() {
return (
Platform.OS === 'ios' &&
((screenH === X_HEIGHT && screenW === X_WIDTH) ||
(screenH === X_WIDTH && screenW === X_HEIGHT))
)
}
/**
* 根据是否是iPhoneX返回不同的样式
* @param iphoneXStyle
* @param iosStyle
* @param androidStyle
* @returns {*}
*/
export function ifIphoneX(iphoneXStyle, iosStyle = {}, androidStyle) {
if (isIphoneX()) {
return iphoneXStyle;
} else if (Platform.OS === 'ios') {
return iosStyle
} else {
if (androidStyle) return androidStyle;
return iosStyle
}
}
/**
* 判断字符串是否为空
* @param str
* @returns {boolean}
*/
export function isEmpty(str) {
if (str !== null || str !== undefined || str !== '') {
return true;
} else {
return false
}
}
/**
* 存储
* @param key
* @param value
* @param successCallback
* @param errorCallback
*/
export function saveAsyncStorage(key, value, successCallback, errorCallback) {
AsyncStorage.setItem(key, value, error => {
if (error) {
errorCallback(error);
} else {
successCallback();
}
})
}
/**
* 取值
* @param key
* @param successCallback
* @param errorCallback
*/
export function getAsyncStorage(key, successCallback, errorCallback) {
AsyncStorage.getItem(key, (error, result) => {
if (error) {
errorCallback(error);
} else {
successCallback(result);
}
})
}
/**
* 删除对应key的
* @param key
* @param successCallback
* @param errorCallback
*/
export function removeAsyncStorage(key, successCallback, errorCallback) {
AsyncStorage.getItem(key, error => {
if (error) {
errorCallback(error);
} else {
successCallback();
}
})
}