Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react'
- import {View, Text, ScrollView, Image, Animated} from 'react-native';
- console.disableYellowBox = true;
- const HEADER_MAX_HEIGHT=120;
- const HEADER_MIN_HEIGHT=70;
- const PROFILE_MAX_HEIGHT=80;
- const PROFILE_MIN_HEIGHT=40;
- export default class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- scrollY: new Animated.Value(0)
- }
- }
- render() {
- const headerHeight = this.state.scrollY.interpolate({
- inputRange: [0,HEADER_MAX_HEIGHT-HEADER_MIN_HEIGHT],
- ouputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
- extrapolate:'clamp'
- })
- return (<View style={{
- flex:1
- }}>
- <Animated.View style={{
- top:0,
- left:0,
- right:0,
- height:headerHeight,
- position:'absolute',
- backgroundColor:'skyblue'
- }}></Animated.View>
- <ScrollView style={{
- flex: 1
- }}
- scrollEventThrottle={16}
- onScroll={Animated.event(
- [{nativeEvent:{contentOffset: {y: this.state.scrollY}}}])}>
- <View style={{
- height:PROFILE_MAX_HEIGHT,
- width:PROFILE_MAX_HEIGHT,
- borderRadius:PROFILE_MAX_HEIGHT/2,
- overFlow:'hidden',
- marginTop:HEADER_MAX_HEIGHT-PROFILE_MAX_HEIGHT/2,
- borderWith:4,
- borderColor:'white',
- marginLeft:11
- }}>
- <Image source={require('./assets/me.jpg')} style={{
- borderWith:4,
- borderColor:'white',
- height:PROFILE_MAX_HEIGHT,
- width:PROFILE_MAX_HEIGHT,
- borderRadius:PROFILE_MAX_HEIGHT/2,
- }}/>
- </View>
- <View>
- <Text style={{
- fontWeight:'bold',
- fontSize:18,
- paddingLeft:11
- }}>Nagacoder</Text>
- </View>
- </ScrollView>
- </View>)
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement