效果描述:当下拉的时候渐变产生对固定的搜索框
import React, { Component } from "react";
import { connect } from "react-redux";
import {
Container,
Header,
Title,
Content,
Button,
Icon,
Left,
Right,
Body,
FlatList,
} from "native-base";
import {
Dimensions,
Image,
Animated,
ListView,
PixelRatio,
StyleSheet,
ScrollView,
Text,
View,
TextInput,
TouchableOpacity,
Modal,
LayoutAnimation,
Platform,
RefreshControl,
TouchableWithoutFeedback
} from "react-native"
import Echarts from 'native-echarts';
var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;
import common from '../../../widgets/common';
import LoadingModal from '../../../widgets/loading';
const isIOS = Platform.OS == "ios"
const { width, height } = Dimensions.get('window')
const headH = 140
const InputHeight = 28
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class FServer extends Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
searchView: new Animated.Value(0),
modalVisible: false,
searchBtnShow: true,
listLoading: false,
isRefreshing: false
};
//第一个透明度的变化
this.SEARCH_BOX_Y = 48
this.SEARCH_FIX_Y = headH-64
this.SEARCH_KEY_P = 58
this.SEARCH_DIFF_Y = this.SEARCH_FIX_Y-this.SEARCH_BOX_Y
}
_onRefresh(){
this.setState({isRefreshing: true});
setTimeout(() => {
this.setState({isRefreshing: false});
}, 2000)
}
_renderHeader(){
let lbsOpaticy = this.state.scrollY.interpolate({
inputRange: [0, this.SEARCH_BOX_Y],
outputRange: [1, 0]
})
let searchY = this.state.scrollY.interpolate({
inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_FIX_Y, this.SEARCH_FIX_Y],
outputRange: [0, 0, this.SEARCH_DIFF_Y, this.SEARCH_DIFF_Y]
})
let keyOpaticy = this.state.scrollY.interpolate({
inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_KEY_P],
outputRange: [1, 1, 0]
})
return (
<View style={styles.header}>
<Animated.View style={[styles.lbsWeather, {opacity: lbsOpaticy,}]}>
<View style={styles.lbs}>
<Text style={{fontSize: 18, fontWeight: 'bold', color:"#fff", paddingHorizontal: 5}}>太平洋企业中心</Text>
</View>
<View style={styles.weather}>
<View style={{marginRight: 5}}>
<Text style={{color: "#fff", fontSize: 11, textAlign: "center"}}>{"3°"}</Text>
<Text style={{color: "#fff", fontSize:11}}>{"阵雨"}</Text>
</View>
</View>
</Animated.View>
<Animated.View style={{
marginTop:15,
transform: [{
translateY: searchY
}]
}}>
<View style={[styles.searchBtn, {backgroundColor: "#fff"}]}>
<Text style={{fontSize: 13, color:"#666", marginLeft: 5}}>{"输入商家,商品名称"}</Text>
</View>
</Animated.View>
<Animated.View style={[styles.keywords, {opacity: keyOpaticy}]}>
{
['肯德基','烤肉','吉野家','粥','必胜客','一品生煎','星巴克'].map((item, i) => {
return (
<TouchableWithoutFeedback key={i}>
<View style={{marginRight: 12}}>
<Text style={{fontSize: 12, color:"#fff"}}>{item}</Text>
</View>
</TouchableWithoutFeedback>
)
})
}
</Animated.View>
</View>
)
}
_renderFixHeader(){
let showY = this.state.scrollY.interpolate({
inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_FIX_Y, this.SEARCH_FIX_Y,this.SEARCH_FIX_Y],
outputRange: [-9999, -9999, 0, 0,0]
})
return (
<Animated.View style={[styles.header, {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom:0,
height: 64,
paddingTop: 25,
transform: [
{translateY: showY}
]
}]}>
<TouchableWithoutFeedback onPress={()=>{}}>
<View style={[styles.searchBtn, {backgroundColor: "#fff"}]}>
<Text style={{fontSize: 13, color:"#666", marginLeft: 5}}>{"输入商家,商品名称"}</Text>
</View>
</TouchableWithoutFeedback>
</Animated.View>
)
}
render() {
return (
<View style={{backgroundColor:'#fff'}}>
<ScrollView
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
scrollEventThrottle={16}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)}
tintColor="#0398ff"
title="拼命加载中..."
/>
}
>
{this._renderHeader()}
<View style={{height:1000}}>
</View>
</ScrollView>
{this._renderFixHeader()}
</View>
);
}
}
const styles = StyleSheet.create({
header: {
backgroundColor: "#0398ff",
height: headH,
paddingTop: 30,
paddingHorizontal: 16
},
typesView: {
paddingBottom: 10,
flex: 1,
backgroundColor: "#fff",
flexDirection: "row",
flexWrap: "wrap"
},
typesItem: {
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center"
},
lbsWeather: {
height: InputHeight,
overflow: "hidden",
flexDirection: "row",
justifyContent: "space-between"
},
placeholder: {
height: InputHeight,
position: "absolute",
left: 0,
top: 0,
right: 0,
borderRadius: 14,
backgroundColor: "#fff",
alignItems: "center"
},
lbs: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
weather: {
flexDirection: "row",
alignItems: "center"
},
textInput:{
flex: 1,
fontSize: 13,
paddingLeft: 10,
paddingRight: 10,
height: InputHeight,
borderRadius: 14,
backgroundColor: "#fff"
},
searchHeadBox: {
height: InputHeight,
flexDirection: "row",
alignItems: "center"
},
searchBtn: {
borderRadius: InputHeight,
height: InputHeight,
flexDirection: "row",
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center"
},
keywords: {
marginTop: 14,
flexDirection: "row"
},
recom: {
flexDirection: "row",
backgroundColor: "#fff",
marginTop: 10,
flexWrap: "wrap"
},
card: {
backgroundColor: "#fff",
marginTop: 10,
paddingHorizontal: 16,
paddingVertical: 16
},
business: {
backgroundColor: "#fff",
marginTop: 10,
paddingVertical: 16
},
time: {
paddingHorizontal: 3,
backgroundColor: "#333",
fontSize: 11,
color: "#fff",
marginHorizontal: 3
},
recomItem: {
width: width/2,
height: 70,
backgroundColor: "#fff",
alignItems: "center",
flexDirection: "row"
},
recomWrap: {
flex: 1,
height: 70,
paddingHorizontal: 16,
backgroundColor: "#fff",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
lTimeScrollView: {
},
lTimeList: {
backgroundColor:"#fff",
alignItems: "center"
},
qtag: {
fontSize: 12,
borderWidth: 1,
color: "#00abff",
borderColor: "#00abff",
paddingHorizontal: 4,
paddingVertical: 3,
borderRadius: 5
},
gift: {
flex: 1,
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
backgroundColor: "#fff"
},
fixSearch: {
backgroundColor: "#0398ff",
height: isIOS ? 64 : 42,
paddingTop: isIOS ? 20 : 0,
paddingHorizontal: 16,
position: "absolute",
left: 0,
right: 0,
top: 0
}
})
export default FServer;