在 ScollView 下触摸/交互

Question

我在垂直 ScrollView 下方有一个图像轮播。我希望能够在图像轮播顶部滑动一些内容。您可以看到我当前的实现方式存在问题。我无法再与我的图像轮播交互。

我希望能够在轮播顶部滚动内容，但是当顶部没有内容时，我希望能够像平常一样使用我的轮播。如果可能的话， 我还希望能够使滚动不弹回到开始的位置，而是停留在原来的位置。如果我将内容滚动到屏幕顶部，它需要保留在屏幕顶部。

我附加了一些关于如何渲染滚动视图和轮播的代码，但每一行代码都可以在我的snack示例 此处。它准确地再现了我的问题。

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 的绝对位置。我们可以通过在 App 中的 ScrollView 添加 zIndex: 2 并设置 backgroundColor: "red" 来调试该问题> 这使我们能够在这里看到问题：

• App 中的 ScrollView 实际上位于 Carousel 的顶部 。

这可能是有意为之，因为我们想要在“Carousel”上滚动。然而，它禁用了触摸的能力，例如滚动、Carousel。

通过更改以下内容可以轻松修复此问题：

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

上边距删除了实际上位于Carousel顶部的部分，并且overflow: "visible"仍然允许我们滚动现在，在滚动 Carousel 时，App 中的 >ScrollView 可以在 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)
    }
});