자동 숨기기 탐색기 스크롤시 ReactNative

Bader

아래로 스크롤 할 때 navbar (NavigatorIOS)를 숨기려고합니다. 어떻게 할 수 있습니까?

감사

Bader

@Vincent 덕분에 React native ..에서 AMScrollingnavbar와 비슷하고 간단한 코드를 만들 수있었습니다. (PS : 결함이 있지만 전반적인 결과에 만족합니다)

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

const AnimatedNavigationBar = Animated.createAnimatedComponent(NavigationBar);

export default class BasicListView extends Component {

  state = { isNavBarHidden: false, height: new Animated.Value(64) };

  setAnimation(disable) {
    Animated.timing(this.state.height, {
      duration: 100,
      toValue: disable ? 0 : 64
    }).start()
  };

   handleScroll(event) {
      this.setAnimation((event.nativeEvent.contentOffset.y > 64));
      this.setState({ isNavBarHidden: !this.state.isNavBarHidden });
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <AnimatedNavigationBar style={{ backgroundColor: 'red', height: this.state.height }} />
        <ScrollView scrollEventThrottle={16} onScroll={this.handleScroll.bind(this)}>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
        </ScrollView>
      </View>
    );
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

사용자가 스크롤할 때 탐색 모음 숨기기

스크롤시 하단 탐색보기 숨기기 / 표시

ReactNative 시작하기 : 화면 탐색

스크롤 시 탐색 모음 숨기기 기능

Windows 탐색기 메뉴 표시 줄과 같은 MenuStrip 자동 숨기기

"스크롤시 탐색 막대 숨기기"코드 이해-Javascript

스크롤 위치에서 탐색 표시 / 숨기기

상태 표시 줄 자동 숨기기 (소프트 탐색 키 제외)

탐색 수명 주기 ReactNative

스크롤바를 동적으로 표시 및 숨기기

barba.js 페이지 전환과 함께 작동하지 않는 스크롤 아래로 탐색 숨기기

이 숨기기 메뉴 / 스크롤 탐색이 작동하는 이유는 무엇입니까?

SwipeRefreshLayout 내부 스크롤시 사용자 지정보기 숨기기 및 표시

탐색 표시 줄 표시 / 숨기기

페이지 스크롤에서 탐색 메뉴 표시 / 숨기기 오프셋

탐색 표시 줄 숨기기

클릭시 탐색 모음 숨기기

스크롤 시 DIV 숨기기/표시

스택 탐색기에서 헤더 숨기기 반응 탐색

Visual Studio Code-자동 숨기기 탐색기

클릭시 Twitter Bootstrap 탐색 숨기기 숨기기

자바 스크립트를 사용하여 탐색 모음 숨기기 및 표시

상단 고정 탐색을 사용하는 동안 텍스트 숨기기

ReactNative : 새 페이지 탐색이 완료된 후에 만 활동 표시기를 비활성화합니다.

Angular에서 사용자에 따라 탐색 모음 숨기기 및 표시

ReactNative: 여러 줄 TextInput 스크롤 시 키보드 닫기

Umbraco 7 사용자가 액세스 할 수없는 탐색 노드 숨기기

목록보기 스크롤시 검색 표시 줄 숨기기

div 표시 / 숨기기 및 스크롤

TOP 리스트

뜨겁다태그

보관