스크롤시 TabNavigators 및 머리글 숨기기

Question

머리글 및 TabNavigator 탭을 Scroll에 숨기고 싶습니다. 어떻게해야합니까? 나는 그들을 숨기고 싶다. 그리고 스크롤에 올려라. 내 코드 :

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; 

나는 애니메이션 API에 대한 this link을 확인하지만 수 없습니다 onScoll에서이를 구현하는 방법을 figureout 수 있나요?

그래서 헤더 홈 화면 위로 스크롤 할 때 TAB1 및 TAB2가 스크롤 및 쇼에 숨겨야합니다 탭. 어떻게해야합니까?

이 작업을 시작하는 데 도움을주십시오.

감사합니다.

Answer 1

나는 또한 동일한 애니메이션 문제로 고민했다. 나는 react-native API 인 Animated을 사용하여 헤더를 최대화하고 최소화하기 위해이 코드를 시도했다. 동일한 작업을 수행하거나 숨길 수도 있습니다.

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', 
    }, 
}); 

희망이 있으면 도움이 될 것입니다.