React 네이티브 슬라이드 패널 및 스크롤보기

Question

나는 네이티브 반응이있는 응용 프로그램을 개발 중입니다. 이 UI 요소는 iOS의지도와 유사합니다.이 요소는 패널을 아래에서 밀어 내고 내부에는 스크롤 가능한 목록이 있습니다.

슬라이드 아웃 패널의 경우 rn-sliding-up-panel이라는 구성 요소를 사용하고 있습니다. 이벤트 리스너로 여러 개의 소품이 있습니다. 예를 들어 그 내부

<SlidingUpPanel 
    allowDragging={/*Boolean*/} 
    onDragStart={()=>{} /*When it is about to be dragged*/} 
    onDrag={()=>{} /*When it is being dragged*/} 
    onDragEnd={()={} /*When the user is no longer touching the screen*/} 
></SlidingUpPanel> 

를 들어, 나는 <ScrollView>이 react-native-elements에서 <List>를 포함합니다. 내가 아는 한, 그것은 것, 단 하나의 벤트 리스너가 있습니다

<ScrollView onScroll={()=>{}}></ScrollView> 

---

내 문제는 목록에 스크롤하는 것은 실제로 (이 아래로 밀어 종료) 종료 패널을 일으키는 것입니다. 나는 상태를 추가하고 onScroll을 modfiying하여 해결 방법을 찾을 :

state = { 
    dragPanel: true, 
} 
/*===========================================*/ 
<SlidingUpPanel allowDragging={this.state.dragPanel}> 
    <ScrollView onScroll={()={ this.setState({dragPanel: false}) }}></ScrollView> 
</SlidingUpPanel> 

그러나, 나는 드래그를 복원 할 수있는 방법을 찾을 수 있고, 효율적으로 해고하지 않습니다.

TL;

서로 겹치는 일정하지 않고 SlidingUpPanel 안에있는 ScrollView를 구현하는 방법이 eficient는 DR

? 아마도 function(e){e.preventDefault();}과 비슷한 것을 사용하고 있을까요?

Answer 1

제대로 활성화/드래그 외부 스크롤을 복원, preventDefault() 순수 웹 자바 스크립트 일이 내가 오랫동안 찾고 있었다에서

_onGrant() { 
    this.setState({ dragPanel: false }); 
    return true; 
} 

_onRelease() { 
    this.setState({ dragPanel: true }); 
} 

constructor(props) { 
    super(props); 

    this._onGrant = this._onGrant.bind(this); 
    this._onRelease = this._onRelease.bind(this); 

    this._panResponder = PanResponder.create({ 
    onMoveShouldSetPanResponder: this._onGrant, 
    onPanResponderRelease: this._onRelease, 
    onPanResponderTerminate: this._onRelease, 
    }); 
} 

render() { 
    <SlidingUpPanel allowDragging={this.state.dragPanel}> 
    <ScrollView 
     {...this._panResponder.panHandlers} 
    /> 
    </SlidingUpPanel> 
} 

을 위해, 나는 더 preventDefault에서이없는 생각 반응 - 네이티브. 문서 섹션 Handling Touches에서

는 반응 네이티브 단지 Objc (아이폰 OS) & 자바 (안드로이드) 이벤트를 시뮬레이션하기 위해 자바 스크립트를 사용합니다.