Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const HEADER_EXPANDED_VIEW = 200
- const HEADER_COLLAPSED_VIEW = 80
- export default class HomeActivity extends Component {
- constructor(props) {
- super(props)
- this.state = {
- scrollY: new Animated.Value(0)
- }
- }
- static navigationOptions = {
- title: "HomeActivity",
- header: null
- }
- render() {
- const headerHeight = this.state.scrollY.interpolate({
- inputRange: [0, HEADER_EXPANDED_VIEW - HEADER_COLLAPSED_VIEW],
- outputRange: [HEADER_EXPANDED_VIEW, HEADER_COLLAPSED_VIEW],
- extrapolate: "clamp"
- })
- // console.log(headerHeight)
- return (
- <View style={styles.container}>
- <ScrollView
- contentContainerStyle={{
- padding: 16,
- paddingTop: HEADER_EXPANDED_VIEW,
- color: "#FFFFFF"
- }}
- onScroll={Animated.event([
- {
- nativeEvent: {
- contentOffset: {
- y: this.state.scrollY
- }
- }
- }
- ])}
- >
- <Text style={styles.title}>This is Title</Text>
- <Text style={styles.content}>
- .....
- </Text>
- </ScrollView>
- <CollapsingHeader headerHeight={headerHeight} />
- </View>
- )
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1
- },
- scrollContainer: {
- padding: 16
- },
- title: {
- fontSize: 24,
- marginVertical: 16
- }
- })
- export default class CollapsingHeader extends Component {
- render() {
- return (
- <Animated.View
- style={{
- height: this.props.headerHeight,
- width: Dimensions.get("screen").width,
- position: "absolute",
- top: 0,
- left: 0,
- borderWidth: 2,
- borderColor: "#FF0000",
- backgroundColor: "#212121"
- }}
- >
- <View
- style={{
- borderWidth: 2,
- borderColor: "#00FF00"
- }}
- >
- <MenuButton />
- </View>
- <View
- style={{
- flexDirection: "row",
- borderWidth: 2,
- borderColor: "#0000FF"
- }}
- >
- <View
- style={{
- flexGrow: 1
- }}
- >
- <Text
- style={{
- fontFamily: "NunitoSans-Bold",
- fontSize: 40,
- color: "#FFFFFF"
- }}
- >
- Home
- </Text>
- </View>
- <SortButton />
- <SearchButton />
- </View>
- </Animated.View>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement