react-native – ScrollView下的可点击背景[React Native]

发布时间：2020-12-15 09:36:34 所属栏目：百科来源：网络整理

导读：所以,我想创建一个类似于下面的布局. [参考图片] 因此背景有一个全屏幕MapView(React Native Maps),上面有标记,需要点击. 并且在MapView上有一个全屏高度的Scrollview,它最初有一些与其内容相关的上边距. 但问题是如果我以这种方式安排我的视图,地图上的标记

所以,我想创建一个类似于下面的布局. [参考图片]

因此背景有一个全屏幕MapView(React Native Maps),上面有标记,需要点击.

并且在MapView上有一个全屏高度的Scrollview,它最初有一些与其内容相关的上边距.

但问题是如果我以这种方式安排我的视图,地图上的标记在初始状态下是不可点击的.

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

我不确定它是否真的有可能解决这个问题.

初始状态

Initial State

滚动后

After Scrolling

解决方案

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

解决方法

我首先从您想要的任何y坐标开始向ScrollView添加绝对定位(位置：绝对).我会把这个y值设为一个状态,例如

yValue：new Animated.Value(start_value)或只是yValue：start_value

然后我会使用ScrollView的prop onScroll事件来处理这个y坐标的变化,例如对于滚动的前100个像素,它只是改变yValue而不是滚动视图.

这使您可以按下父视图中的标记,并使用您提供的相同组件结构.

注意：您还需要执行此操作来折叠scrollview.

注意2：如果这不能给你你想要的结果,我建议考虑使用某种可折叠组件来完成这项任务,例如https://github.com/oblador/react-native-collapsible

希望这可以帮助

编辑：要折叠滚动视图,您可以首先确定滚动方向是否向下(我认为您通过向上滚动完成)然后..

1)只需将内容偏移量添加到yValue即可

2)如果您使用Animated.Value作为yValue,则可以使用animate功能将scrollview向下动画到所需位置.我认为这会更好看,因为用户只需要一个简单的向下轻弹来折叠视图,这似乎是行业标准.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!