스티커 구성 요소는 내부

http://www.screencapture.ru/file/E88F08Fc

거래, 제품, 이벤트 탭/segmentControl 실제로 바닥에서 시작하고 있고 스크롤 머리글의 바닥을 쳤을 때를 AA 끈적 구성 요소를 구축을 위해 노력하고있는 ScrollView 그것은 중단이 내 코드

 <View style={styles.container}> 
      <ScrollView 
       style={styles.container} 
       scrollEventThrottle={16} 
       onScroll={ 
        Animated.event(
         [{nativeEvent:{contentOffset: {y: this.state.scrollY}}}] 
        ) 
       } 
      > 
       {this._renderScrollViewContent()} 
      </ScrollView> 
      <View style={styles.stickyStuff}></View> 
      <Animated.View 
       style={[styles.header, {height: headerHeight}]} 
      > 
       <Animated.Image 
        source={require('../../assets/images/pvj.jpg')} 
        style={[styles.backgroundImage, {opacity: imageOpacity}]} 
       /> 
       <Animated.View style={[styles.bar, {transform: [{translateY: titleTranslateY}, {translateX: titleTranslateX}]}]}> 
        <Text style={styles.title}>PARIS VAN JAVA</Text> 
       </Animated.View> 

      </Animated.View> 
     </View>

출처

2016-07-26 Bondan Herumurti

나는 여전히 어떤 평판을 가지고 havent 한 원인 그래서 난 삽입 이미지 캡을 선별 할 필요가 기운 다, 당신은 당신이 혼란스럽게 만들 죄송 –

@ChrisGeirman을하려고하는지 이해가 안 돼요 모든 운동은 내가 1 http://www.screencapture.ru/file/1609269e 2. http://www.screencapture.ru/file/fEA8377B 3.http을 기대 할 필요가 단계적으로 그렇게 여기 UX를 UX를 보여합니다 : //www.screencapture.ru/file/651a7f98 4.http : //www.screencapture.ru/file/8871a435는 탭 (거래, 제품, 이벤트)이 화면 중앙에서 시작하여 위로 스크롤하면 머리말이 붙어 시작됩니다. –

이상한 점은 새 사용자가 스크린 샷을 추가하지 못하도록하는 것입니다. 나는 그것을 기억하지 않는다. 지금은 이해. 생각해 보시고 [LayoutAnimation] (https://facebook.github.io/react-native/docs/layoutanimation.html)을 보셨습니까? –

얘들 아 내 첫 번째 질문에 대답 주셔서 감사합니다 (어이!) 그래서 기본적으로 내가 무엇을 그들이 F8Scrolling에서 폴백 어디 F8App 코드에 속임수입니다 ... 지금을 수행하는 방법을 발견 그렇게 여기 내 끈적보기 애니메이션의 아이디어를 제공하는이

if (!NativeModules.F8Scrolling) { 
    var distance = EMPTY_CELL_HEIGHT - this.state.stickyHeaderHeight; 
    var translateY = 0; this.state.anim.interpolate({ 
    inputRange: [0, distance], 
    outputRange: [distance, 0], 
    extrapolateRight: 'clamp', 
    }); 
    transform = [{translateY}]; 
}

에 사용할 수없는 경우 기본 모듈 난

const stickySegmentControlX = this.state.scrollY.interpolate({ 
    inputRange: [0, STICKY_SCROLL_DISTANCE], 
    outputRange: [INIT_STICKY_HEADER, HEADER_MIN_HEIGHT], 
    extrapolate: 'clamp' 
}) 

... 

    return(
    .... 
    <Animated.View ref="stickyHeader" style={[styles.stickyStuff, {top: stickySegmentControlX}]}> 
     <Text>Go Stick</Text> 
    </Animated.View> 
    .... 
    );

들 결국 오 난의 상단에 위치 애니메이션되는 짓을했는지 기본적으로 어떤 {위치를 '절대'}의 견해를 출력 범위의 값이 내 헤더의 높이로 바닥 위치 사이이기 때문에 (그래서 바로 아래에 중단됩니다 동안 내

이 당신이 끈적 끈적한 헤더 사용자 정의보기를 이동 ... 헤더)와 입력 범위는 0 사이에하고있는 ScrollView를 스크롤 상단 위치와 헤더 높이 ...의 차이는 결국 애니메이션은 자연 느낄 것이다.
012,372,762,226 .. 여기

내 대답은 혼란을 느끼는 경우, 그 더 나은 당신이 내 중간 게시물 제목 결과를의

출처

2016-07-27 12:30:11

있는 콘텐츠 KEEP이

을 스크롤하면서 스틱을 시작 당신은 알을 넣어 수 ScrollView 내부 콘텐츠의 난 다음, 거기에 끈적 끈적한 헤더를 배치 내용의 나머지 부분에 대한 기본보기 내에서 두 번째 ScrollView를 사용합니다. 이런 식으로 뭔가 : 그것은 가능한 공간의 일부를 소요 그래서 두 번째 ScrollView에 대한

<View style={styles.container}> 
    <ScrollView style={styles.mainScrollView}> 
     <View style={styles.header}> 
      // Header content here 
     </View> 

     <ScrollView style={styles.scrollableContent}> 
      // Scrollable content here 
     </ScrollView> 
    </ScrollView> 
</View>

설정 height는, 그 방법은 헤더 상단에 볼 수있을 것입니다.

출처

2016-07-26 07:54:18

나는이 시차 스크롤 뷰 모듈을 발견했습니다. 그것은 그런 종류의 행동을합니다.

react-native-parallax-scroll-view

출처

2016-07-26 15:50:36

그것은있는 ScrollView 구성 요소가 매우 간단합니다. stickyHeaderIndices라는 이름의 이미 뭔가가 있습니다. 다음 코드에서는 renderComponent2 내의 내용이 스크롤 할 때 고정되어 있습니다.

<ScrollView 
     stickyHeaderIndices={[1]} 
     showsVerticalScrollIndicator={false} 
> 
    {this.renderComponent1()} 
    {this.renderComponent2()} 
    {this.renderComponent3()} 
</ScrollView>

참조 : https://facebook.github.io/react-native/docs/scrollview.html#stickyheaderindices

출처

2017-12-29 13:19:15

스티커 구성 요소는 내부

답변

관련 문제