饿了么 顶部搜索框下拉动画小效果

Posted 2020-10-14 谢玉胜的技术文章

效果描述：当下拉的时候渐变产生对固定的搜索框

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;