Touch/interact 在 ScrollView 下方

Question

我在垂直滚动视图下方有一个图像轮播。我希望能够在我的图像轮播上滑动一些内容。您可以看到我目前的实施方式存在问题。我无法再与我的图片轮播交互。

我希望能够在我的旋转木马顶部滚动内容，但是当顶部没有内容时，我希望能够像这样使用我的旋转木马普通的。如果可能的话， 我还希望 能够让滚动不弹回到开始的位置，而是停留在原来的位置。如果我将我的内容滚动到屏幕顶部，它需要留在屏幕顶部。

我附上了一些关于如何渲染 scrollView 和 carousel 的代码，但每一行代码都可以在我的 snack 示例 here 中找到。它完全重现了我的问题。

export default function App() {
  return (
      <View style={{backgroundColor: '#d1cfcf', flex: 1}}> 
      <View style={{position: 'absolute',}}>
          <Carousel/>
      </View>
      
      {/* beginning of white box below image*/}
      <ScrollView style={{height: scale(500)}}>
      <View style={styles.whiteBox}>
        <View style={{flexDirection: 'row', top: scale(15), left: scale(20)}}></View>

          {/* grey body in white text box*/}
        <View style={styles.greyBody}></View>
      </View>
      {/* end of white box below image*/}
    
      {/* grey body in white text box*/}
        {/* beginning of description*/}
      <View style={{bottom: scale(340),left: scale(25), position: "absolute", backgroundColor: 'red'}}>
          <Text style={{fontSize: 15, color: 'black', fontWeight: 'bold'}}>
              Description
          </Text>
      </View>

      {/* beginning of View more text*/}
      <View style={{position: 'absolute', top: scale(400), left: scale(25), height: scale(100), width: scale(300),}}>
          <Text>
             Lorem ipsum dolor sit amet, in quo dolorum ponderum, nam veri molestie constituto eu. Eum enim tantas sadipscing ne, ut omnes malorum nostrum cum. Errem populo qui ne, ea ipsum antiopam definitionem eos.  Lorem ipsum dolor sit amet, 
          </Text>
      </View>
      </ScrollView>
      {/* End of View more text*/}
      {/* End of description*/}
      </View>
  );
}

Answer 1

您对两个视图都使用了绝对定位，即 Carousel 及其下方的 ScrollView 的绝对定位。我们可以通过将 zIndex: 2 添加到 App 中的 ScrollView 并设置 backgroundColor: "red" 来调试问题，这使我们能够在此处看到问题：

App 中的 ScrollView 实际上 在 Carousel 的顶部 。

这可能是有意为之，因为我们想滚动“越过”Carousel。但是，它禁用了 touch 的能力，例如滚动，Carousel.

这可以通过更改以下内容轻松解决：

删除App中ScrollView的{height: scale(500)}，
将{marginTop: 250, overflow: "visible"}添加到App中的ScrollView。

上边距删除了 Carousel 的 on top 部分，overflow: "visible" 仍然允许我们滚动 App 中的 ScrollView在滚动 Carousel 时在 Carousel 上方工作。

请注意，文本现在已移至底部。我们可以通过

解决这个问题

将包含您的文本的视图的 top: scale(400) 更改为 top: scale(200)。

我已经使用您的初始代码制作了一个完全可用的 snack。请注意，我只在 iOS 上对此进行了测试。 Android 可能会有所不同。

因为我只更改了 App.js，这里是 App.js 的更新代码，它解决了这个问题。

import React,{useState} from 'react';
import { Text, View, StyleSheet, ScrollView, } from 'react-native';

import Carousel from './Carousel';
import {
  scale,
  verticalScale,
  moderateScale,
  ScaledSheet,
} from 'react-native-size-matters';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import ViewMoreText from 'react-native-view-more-text';

export default function App() {
  return (
      <View style={{backgroundColor: '#d1cfcf', flex: 1}}> 
      <View style={{position: 'absolute',}}>
          <Carousel/>
      </View>
      
      {/* beginning of white box below image*/}
      <ScrollView style={{marginTop: 250, overflow: "visible"}}>
      <View style={styles.whiteBox}>
        <View style={{flexDirection: 'row', left: scale(20)}}></View>

          {/* grey body in white text box*/}
        <View style={styles.greyBody}></View>
      </View>
      {/* end of white box below image*/}
    
      {/* grey body in white text box*/}
        {/* beginning of description*/}
      <View style={{bottom: scale(340),left: scale(25), position: "absolute", backgroundColor: 'red'}}>
          <Text style={{fontSize: 15, color: 'black', fontWeight: 'bold'}}>
              Description
          </Text>
      </View>

      {/* beginning of View more text*/}
      <View style={{position: 'absolute', top: scale(200), left: scale(25), height: scale(100), width: scale(300),}}>
          <Text>
             Lorem ipsum dolor sit amet, in quo dolorum ponderum, nam veri molestie constituto eu. Eum enim tantas sadipscing ne, ut omnes malorum nostrum cum. Errem populo qui ne, ea ipsum antiopam definitionem eos.  Lorem ipsum dolor sit amet, 
          </Text>
      </View>
      </ScrollView>
      {/* End of View more text*/}
      {/* End of description*/}
      </View>
  );
}

const styles = StyleSheet.create({
  whiteBox: {
    height: scale(175),
    width: scale(300),
    backgroundColor: 'white',
    borderRadius: 10,
    position: 'absolute',
    left: scale(25),

    
  },
   distanceBox: {
    height: scale(30),
    width: scale(80),
    backgroundColor: 'white',
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    position: 'absolute',
    top: scale(190),
    left: scale(45),
    justifyContent: 'center',
    flexDirection: 'row'
  },
    busyView:{
      height: scale(20), 
      width: scale(40), 
      backgroundColor: '#ffe6f3', 
      borderRadius: 20, 
      justifyContent: 'center', 
      alignItems: 'center',  
    },
    pinkBubble: {
      height: scale(20),
      width: scale(40), 
      backgroundColor: '#ffe6f3', 
      borderRadius: 20, 
      justifyContent: 'center', 
      alignItems: 'center',
    },
    greyBody: {
      backgroundColor: '#d1cfcf', 
      width: scale(255), 
      height: scale(75), 
      alignSelf: 'center', 
      borderRadius: 15, 
      top: scale(70)
    }
});

Touch/interact 在 ScrollView 下方

Touch/interact underneath ScollView

reactjs

react-native

react-native-scrollview