1

对于我的项目，我希望实现一个 ScrollView 来显示项目，就好像您正在浏览一盒名片一样。我当前的实现基于Albert Brand 关于动画滚动视图的文章（在尝试了许多其他方法之后）。

然而，整个事情现在变得非常紧张。谁能告诉我如何平滑当前的实施？或者，有没有人有提示如何以不同的方式获得这种行为？任何解决方案都应该适用于 iOS 和 Android。

这个 gif 显示了我当前的实现，包括抖动问题。它还应该清楚地说明我所追求的行为： iOS 模拟器中 ScrollView 的屏幕截图

这是我目前的实现：

import React from 'react'
import {
  Animated,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
  StatusBar,
} from 'react-native'

const SCREEN_HEIGHT = Dimensions.get('window').height

const yOffset = new Animated.Value(0)

const onScroll = Animated.event(
  [{ nativeEvent: { contentOffset: { y: yOffset } } }],
)

function CardView(props: { children?: ReactElement<*> }) {
  return (
    <Animated.ScrollView
      scrollEventThrottle={16}
      onScroll={onScroll}
      pagingEnabled
    >
      {props.children}
    </Animated.ScrollView>
  )
}

function Page(props: { children?: ReactElement<*>, index: 1 }) {
  return (
    <Animated.View style={[style.scrollPage]}>
      {props.children}
    </Animated.View>
  )
}

function Card(props: { text: string, index: number }) {
  return (
    <Animated.View style={[style.card, marginTransform(props.index)]}>
      <Text>
        {props.text}
      </Text>
    </Animated.View>
  )
}

function marginTransform(index: number) {
  return {
    marginTop: yOffset.interpolate({
      inputRange: [
        (index - 1) * SCREEN_HEIGHT,
        index * SCREEN_HEIGHT,
        (index + 1) * SCREEN_HEIGHT,
        (index + 2) * SCREEN_HEIGHT,
        (index + 3) * SCREEN_HEIGHT,
      ],
      outputRange: [
        -40,
        80,
        SCREEN_HEIGHT + 40,
        2 * SCREEN_HEIGHT + 20,
        3 * SCREEN_HEIGHT,
      ],
      extrapolate: 'clamp',
    }),
  }
}

export default function App() {
  return (
    <CardView>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
        return(
          <Page key={i}>
            <Card text={`Card ${i}`} index={i}>
            </Card>
          </Page>
        )
      })}
    </CardView>
  )
}

const style = StyleSheet.create({
  scrollPage: {
    height: SCREEN_HEIGHT,
    backgroundColor: 'transparent',
  },
  card: {
    height: SCREEN_HEIGHT,
    alignItems: 'center',
    borderRadius: 4,
    borderWidth: 1,
    backgroundColor: '#F5FCFF',
  }
})
4

3 回答 3

1

我找到的简短答案：如果您在滚动时弄乱了它的高度，则 ScrollViews 将永远不会流畅地制作动画。在旁注中，我确实发现当我设置时性能显着提高scrollEventThrottle={1}

我最终实施的解决方案是制作自己的组件；在元素列表的顶部呈现 ScrollView。我将这些元素的动画高度值连接到 ScrollView 的滚动 y 偏移量。

如果有人遇到相同的用例实现问题，请随时使用我的工作：https ://github.com/isilher/react-native-card-scroll

于 2017-05-09T12:05:22.770 回答
0

确保禁用 Debug JS Remote。您还应该删除类中的所有 console.log() （例如，如果您出于调试原因记录 yOffset）。这应该加快速度。

于 2017-05-03T23:31:04.977 回答
-1

嘿，试试这useNativeDriver: true将帮助你摆脱滞后

onScroll={Animated.event(
   [{ nativeEvent: { contentOffset: { x: xOffset } } }],
   { useNativeDriver: true }
)}
于 2018-02-26T23:48:35.633 回答