在Scroll上隐藏TabNavigators和Header

Question

我想在Scroll上隐藏Header和TabNavigator选项卡。我怎么做？我想隐藏它们在Scroll上并在ScrollUp上显示它们。我的代码：

import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity} from 'react-native';

class ScrollTest extends Component {

    render(){
    const { params } = this.props.navigation.state;

        return(
            <View style={styles.container}>

               <ScrollView>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
               </ScrollView>

            </View>
        )
    }
}
const styles = StyleSheet.create({
  container:{
    flex:1, padding:5 
  },
  newView:{
     height: 200, backgroundColor:'green', margin:10
  }
})
export default ScrollTest;

我检查了this link的动画API，但无法弄清楚如何在onScoll中实现它？

所以标题HomeScreen和选项卡Tab1和Tab2应该在滚动时隐藏并在向上滚动时显示。我怎么做？

请帮忙开始这个。

非常感谢。

Answer 1

我也遇到了同样的动画问题，我尝试使用反应原生的Animated API来最大化和最小化标题。你也可以做同样的事情来展示和隐藏它。

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, Image,Animated } from 'react-native';

const HEADER_MAX_HEIGHT = 200;// set the initial height
const HEADER_MIN_HEIGHT = 60;// set the height on scroll
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

export default class App extends Component {
  constructor(props) {
  super(props);

  this.state = {
    scrollY: new Animated.Value(0),
  };
}
  render() {
  const headerHeight = this.state.scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
    extrapolate: 'clamp',
  });
    return(
    <View style={{flex: 1}}>
    <ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
       [{nativeEvent: 
       {contentOffset: {y: this.state.scrollY}}}]
      )}>
      <View style={styles.container}>
        <Text style={styles.paragraph}>hello</Text>
        <Image source={{uri: "https://static.pexels.com/photos/67843/splashing-splash-aqua-water-67843.jpeg"}} style={styles.imageStyle}/>
        <Image source={{uri: "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg" }} 
        style={styles.imageStyle}/>
      </View>
    </ScrollView>
    <Animated.View style={[styles.footer, {height: headerHeight}]}>
      <View style={styles.bar}>
        <Text>text here</Text>
      </View>
    </Animated.View>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 24,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
  imageStyle: {
    height: 360,
    width: '100%',
  },
  footer: {
    position:'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
  },
  bar: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

希望这有助于某人。