ScrollView 아래의 클릭 가능한 배경 [React Native]

Question

그래서 아래에서 설명하는 것과 비슷한 레이아웃을 만들고 싶습니다. [이미지 참조]

그래서 배경에는 Markers과 함께 전체 화면 MapView (React Native Maps)이 표시되며 클릭 할 수 있어야합니다.

MapView에는 전체 화면 높이의 Scrollview이 있으며 처음에는 내용과 관련된 일부 여백이 있습니다.

그러나이 방법으로 내보기를 정렬하면지도의 마커를 처음 상태로 클릭 할 수 없습니다.

<View> 
    <MapView> 
    <Marker clickEventHere></Marker> 
    <Marker clickEventHere></Marker> 
    </MapView> 
    <ScrollView fullscreen> 
    <View marginTop></View> 
    </ScrollView> 
<View> 

정말 이것을 해결할 수 있는지 확실하지 않습니다.

초기 상태

y는 좌표 어떤에서 시작

yScrolled = event.nativeEvent.contentOffset.y; 
    yValue = this.state.yValue - yScrolled; 

    upwardScroll = yScrolled > 0; 

    if(upwardScroll && (yValue > 0)){ 
     this.setState({ 
      yValue: yValue 
     }); 
    } 


    if(yScrolled === 0){ 
     yScrolled = -10; 
    } 
    if(!upwardScroll && (yValue <= scrollViewMarginTop)){ 
     yValue = this.state.yValue - yScrolled; 
     console.debug("UPDATE DOWNWARD"); 
     this.setState({ 
      yValue: yValue 
     }); 
    } 

Answer 1

나는 당신의있는 ScrollView에 절대 위치를 추가로 시작하는 것

시도

솔루션 (position: absolute)을 스크롤 한 후 싶습니다. 나는 예를 들어,이 y 값 상태 만들 것

yValue: new Animated.Value(start_value) 또는 단순히 yValue: start_value

그때 스크롤의 첫 번째 100 개 픽셀 예를 들어,이 Y의 변화 좌표를 처리 할 수있는 ScrollView의 소품 onScroll 이벤트를 사용하는 것이 그 단순히보기를 스크롤하는 대신 yValue을 변경합니다.

부모보기에있는 마커를 누르고 제공된 것과 동일한 구성 요소 구조를 사용할 수 있어야합니다.

참고 : 스크롤보기를 축소하려면이 작업이 필요합니다.

는 는 주 2

: 이것은 당신이, 내가이 작업을 위해 접을 수있는 구성 요소의 일종을 사용하여에보고 좋을 것 찾고 있던 결과, 예를 제공하지 않는 경우 https://github.com/oblador/react-native-collapsible

희망이

을하는 데 도움이 편집 : 스크롤 방향은 다음과 (난의 youve upwardScroll을 통해 이루어 생각하는) 아래의 경우

1) 어느 단순히 yValue

오프셋 내용을 추가 .. 먼저 확인할 수있는 ScrollView를 축소하려면

Animated.Value을 yValue으로 사용한 경우 원하는 위치로 스크롤 뷰를 애니메이션하는 애니메이션 기능을 사용할 수 있습니다. 사용자가 업계 표준처럼 보이는 화면을 축소하기 위해 단순한 아래쪽으로 쓸어 넘기기 만하면되므로 더 멋지게 보일 것입니다.