Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2018
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react'
  2. import {View, Text, ScrollView, Image, Animated} from 'react-native';
  3. console.disableYellowBox = true;
  4. const HEADER_MAX_HEIGHT=120;
  5. const HEADER_MIN_HEIGHT=70;
  6. const PROFILE_MAX_HEIGHT=80;
  7. const PROFILE_MIN_HEIGHT=40;
  8. export default class Home extends Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.       scrollY: new Animated.Value(0)
  13.     }
  14.   }
  15.  
  16.   render() {
  17.     const headerHeight = this.state.scrollY.interpolate({
  18.       inputRange: [0,HEADER_MAX_HEIGHT-HEADER_MIN_HEIGHT],
  19.       ouputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
  20.       extrapolate:'clamp'
  21.     })
  22.     return (<View style={{
  23.       flex:1
  24.     }}>
  25.       <Animated.View style={{
  26.         top:0,
  27.         left:0,
  28.         right:0,
  29.         height:headerHeight,
  30.         position:'absolute',
  31.         backgroundColor:'skyblue'
  32.       }}></Animated.View>
  33.       <ScrollView style={{
  34.           flex: 1
  35.         }}
  36.         scrollEventThrottle={16}
  37.         onScroll={Animated.event(
  38.           [{nativeEvent:{contentOffset: {y: this.state.scrollY}}}])}>
  39.         <View style={{
  40.           height:PROFILE_MAX_HEIGHT,
  41.           width:PROFILE_MAX_HEIGHT,
  42.           borderRadius:PROFILE_MAX_HEIGHT/2,
  43.           overFlow:'hidden',
  44.           marginTop:HEADER_MAX_HEIGHT-PROFILE_MAX_HEIGHT/2,
  45.           borderWith:4,
  46.           borderColor:'white',
  47.           marginLeft:11
  48.         }}>
  49.           <Image source={require('./assets/me.jpg')} style={{
  50.             borderWith:4,
  51.             borderColor:'white',
  52.             height:PROFILE_MAX_HEIGHT,
  53.             width:PROFILE_MAX_HEIGHT,
  54.             borderRadius:PROFILE_MAX_HEIGHT/2,
  55.           }}/>
  56.         </View>
  57.         <View>
  58.           <Text style={{
  59.             fontWeight:'bold',
  60.             fontSize:18,
  61.             paddingLeft:11
  62.           }}>Nagacoder</Text>
  63.         </View>
  64.  
  65.       </ScrollView>
  66.     </View>)
  67.   }
  68. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement