Reactネイティブスライドアウトパネルとスクロールビュー

Question

私は反応ネイティブのアプリを開発しています。私はiOSのマップと似ているこのUI要素を持っています。そこでは、パネルを一番下からスライドし、スクロール可能なリストがあります。

スライドアウトパネルの場合は、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> 

その中に、私はreact-native-elementsから<List>を含む<ScrollView>を持っています。私の知る限りでは、それがされ、唯一のベントリスナーを持っています

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

---

私の問題は、リスト上でスクロールすると、実際に（それがダウンしてスライドさせて閉じます）閉じるには、パネルを引き起こすことがあります。

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

しかし、私はドラッグを復元する方法を見つけることができない、それはのように効率的に立ち上げていない：私は状態を追加し、それをonScroll modfiyingことで回避策を見つけました。

TL; DR

は、各重複のイベントなしSlidingUpPanel内部ScrollViewを実装するeficient方法はありますか？おそらくfunction(e){e.preventDefault();}に類似したものを使用していますか？

Answer 1

適切に無効/ preventDefault()は純粋ウェブjavascriptのことですが、私は長い間探していたものから

_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（iOS版）&のJava（Androidの）イベントをシミュレートするためにJavaScriptを使用しています。