主页 / coding / 问题 / 79323092
Accepted
financial_physician
Asked: 2025-01-02 15:52:19 +0800 CST

模仿在圆边纸张上滚动

  • 772

我正在 React Native 中实现一个模态框，并希望创建一个独特的滚动效果，其中模态框具有圆角，可根据滚动位置动态调整。具体来说，我希望模态框看起来像一个可滚动的页面，两端都有圆角 - 查看内容顶部时，顶角应该是圆的；查看底部时，底角应该是圆的；滚动中间部分时，角应该是方形的。这会产生类似于通过窗口查看圆形卡片的效果，其中圆边仅在该部分可见时可见。目标是保持圆形卡片的视觉隐喻，同时提供滚动位置的清晰指示。

所以目前我有类似的东西：

<View style={{borderRadius: 8}}>
  <ScrollView>
     // ... some content
  </ScrollView>
</View>

它的角总是圆的，但如果只在顶部和底部圆，那就太酷了……这似乎可能是一个标准效果，但我以前没有做过太多的前端

react-native

1 个回答

  1. Best Answer

    我建议让整个模式可滚动，并保持模式主体的角半径，但要回答你的问题，如何通过从上到下滚动使角半径动态化，这是我的答案

    1. 你需要使用 来聆听你的ScrollView卷轴onScroll
    2. 检查你的 ScrollView 的 y 偏移量是在顶部还是底部

    这是我的示例代码

    
const TestScreen = () => {
  const [borderRadiusStyle, setBorderRadiusStyle] = useState<ViewStyle>(styles.roundedTop);

  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const heightBeforeRound = 0 // adjust this if you want your get your corner radius before reaching the tip of the scroll

    const offsetY = event.nativeEvent.contentOffset.y;
    const height = event.nativeEvent.contentSize.height
    const viewHeight = event.nativeEvent.layoutMeasurement.height
    
    if (offsetY <= heightBeforeRound) {
        setBorderRadiusStyle(styles.roundedTop)
    } else if (offsetY + viewHeight >= height - heightBeforeRound) {
        setBorderRadiusStyle(styles.roundedBottom)
    } else {
        setBorderRadiusStyle(styles.square)
    }
  };

  return (
    <View style={[styles.container]}>
      <ScrollView 
        contentContainerStyle={styles.scrollViewContent} 
        onScroll={handleScroll}
        scrollEventThrottle={16} // Adjust throttle for smoother updates
      >
        {/* Add your content here */}
    </View>
  );
};

const cornerRadius = 8 // adjust on how much corner radius do you want
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  roundedTop: {
    borderTopLeftRadius: cornerRadius,
    borderTopRightRadius: cornerRadius,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  },
  roundedBottom: {
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: cornerRadius,
    borderBottomRightRadius: cornerRadius,
  },
  square: {
    borderRadius: 0,
  },
  scrollViewContent: {
    padding: 16,
  },
});

    这是我的解释

    1. 我用来event.nativeEvent.contentOffset.y获取偏移量 y，这样我们就知道你滚动到了哪里
    2. 我用height和viewHeight来知道你是否在底部
    3. 我使用条件来检查你是在底部还是在顶部，否则意味着你在中心，所以我把它变成正方形

    注意：由于我使用 typescript，因此请导入这些类型，如果你只使用 javascript，请删除它们

    • 1

相关问题