Question

我可以将react native操作按钮的位置设置为固定在平面列表上吗？我添加了一个动作按钮，但是当我滚动平面列表时，该动作按钮隐藏了！

谢谢，前进。

Answer 1

您将要使用Animated API

首先，您需要创建一个可以制作动画的平面列表。这很容易通过Animated.createAnimatedComponent()完成：

import { Flatlist, Animated } from 'react-native'

const AnimatedFlatlist = Animated.createAnimatedComponent(Flatlist)

现在在父组件constructor中创建一个新的Animated.Value。这将是您用来为组件制作动画以使其与AnimatedFlatlist一起滚动的值：

constructor(props) {
  super(props)
  this.state = { translateY: new Animated.Value(0)}
}

然后将要固定的组件包装在Animated.View中，并确保在组件样式中添加transform，并向其传递您创建的动画值：

<Animated.View style={{ transform: [{ translateY: this.state.translateY }]}}>
  {YourFixedComponent}
</Animated.View>

最后，您需要将Animated.event附加到AnimatedFlatlist上。这是通过onScroll道具完成的：

<AnimatedFlatlist
  data={...}
  renderItem={...}
  keyExtractor={...}

  onScroll={Animated.event(
    [{nativeEvent: {contentOffset: {y: this.state.translateY}}}],
    {useNativeDriver: true}
  )}
  scrollEventThrottle={1}
/>

现在，将元素与Flatlist一起移动。这是一个基本示例，您可能需要弄混interpolation和CSS位置才能完全获得所需的内容。

如何在屏幕上将React Native Action按钮设置为固定位置

1 个答案: