ScrollView下的可點擊背景[React Native]

所以，我想創建一個類似於下面的內容的佈局。 [請參閱圖像]ScrollView下的可點擊背景[React Native]

所以背景有一個全屏MapView（反應本地地圖）與Markers在上面，它需要點擊。

還有一個Scrollview全屏幕高度超過MapView，它最初有一些與其內容相關的頂邊距。

但是，如果我這樣安排我的視圖的問題，地圖上的標記不能在初始狀態點擊。

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

我不確定它是否真的有可能解決這個問題。

初始狀態

滾動

解決方案試圖

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 
     }); 
    }

來源

2017-09-27 red-devil

您是否嘗試過將'pointerEvents：'box-none''傳遞給ScrollView的樣式？更多信息在文檔中：https：//facebook.github.io/react-native/docs/view.html#pointerevents –

謝謝！我沒有試過這個。但是這也會使ScrollView中的可見或者子視圖變成不可點擊的，我不想這樣做。 –

從我之前的評論中提供的鏈接：''box-none'：視圖從來不是觸摸事件的目標，但它的子視圖可以.' –

我會與添加絕對定位到您的滾動型開始，（position: absolute）開始在任何y協調後你想。我會做這個的y值的狀態，如

yValue: new Animated.Value(start_value)或者乾脆yValue: start_value

然後我會用滾動型的道具onScroll事件處理協調這一y中的變化，例如，用於滾動的第一個100個像素的它只需更改yValue而不是滾動視圖。

這應該使您能夠按下父視圖中的標記，並使用您提供的相同組件結構。

注意：您還需要這樣做摺疊滾動視圖。

注2：如果不給你你要找的，我會建議尋找到使用某種此任務可摺疊組件的結果，例如https://github.com/oblador/react-native-collapsible

希望這有助於

編輯：要崩潰，你可以首先確定滾動視圖如果滾動方向是向下的（我認爲你已通過upwardScroll完成），然後..

1）無論是簡單的添加內容偏移到您的y值

2）如果您使用Animated.Value作爲yValue，您可以使用動畫功能將向下滾動到您想要的位置。我認爲這看起來會更好，因爲用戶只需要簡單的向下輕擊就可以摺疊看起來像行業標準的視圖。

來源

2017-10-02 03:03:07

現在嘗試第一個解決方案，它在向上滾動的情況下運行良好。如何使滾動視圖向下滾動摺疊？已更新上面嘗試的解決方案。 –

另外，Accordions不會解決這個問題。由於背景地圖需要可見。 –

你不只是做相同的事情嗎？這是一個很難回答的問題，但沒有看到它運行，但我會以兩種方式之一處理向下滾動事件，我編輯了我的答案 –

ScrollView下的可點擊背景[React Native]

回答

相關問題