问题标签 [react-native-reanimated]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
472 浏览

reactjs - 有没有办法根据 Animated.ScrollView React-Native 中的 Y 滚动值将 stlyes position:'relative' 更改为 position:'absolute'

我有一个动画标题,当滚动视图向下滚动时,它会变小并且不透明度增加。在它下面有一个过滤器栏,在它完全夹紧后需要贴在动画标题的下方。我就是这样做的position:"absolute",并使该视图遵循 y 值。问题是,当动画标题尚未完全夹紧时,它看起来很迟钝,而当它向上滚动时,它看起来更糟。最重要的是,滚动指示器隐藏在 position:'absolute' 过滤栏视图后面......我认为解决方案是让该视图具有相对位置,然后将其更改为绝对......但我需要知道是否有一种将样式更改为的position:"relative"方法position:"absolute"在它完成夹紧后,它看起来很光滑,直到它夹紧,或者至少有一种方法可以做到这一点而不会看起来滞后,任何帮助都是非常感谢的。这里有一些代码(一些标签可能没有关闭,但你明白了要点):

这样做:

https://www.youtube.com/watch?v=4GdnkUEdmko

当该视图具有位置时,它可以完美滚动:'relative',我希望它像那样,但是当动画标题已夹紧时更改为位置:'absolute'..

编辑:我正在使用 react native version .61.5 reanimated ^1.7.0,gesture-handler ^1.6.0,react navigation x4 库。这是在 android samsung Galaxy s6 devmode 上测试过的(在生产上也是一样的)

0 投票
0 回答
112 浏览

react-native - 如何使 materialTopTabNavigation 粘到父屏幕动画视图(标题)?

我正在尝试将 materialToptabNavigator 中的 tabBar 粘贴到父屏幕内的动画视图,该视图充当所有选项卡的标题。我已经看到了其他库的一些示例,但我还没有找到使用 react-navigation 版本 4 的示例。此外,我需要它仅在视图完成动画后才能粘贴,所以我可能不得不继续传递scrollYscrollView 的值到 tabnavigator 的样式,直到它达到 HeaderMinHeight(完全动画时的新视图高度)。我不知道是否可以动态更改 TabBar 的样式,或者是否可以添加自定义 tabBarComponent 。

这是我的 parentScreen 嵌套 toptabNav:https ://youtu.be/IrSLVpoPmj0

这就是我想要实现的目标:https ://youtu.be/B5wv8jFGNUo

很抱歉我不能以 gif 格式发布它,stackOverflow 不会让我这样做。如果无论如何您可以向我指出一个可能的解决方案或示例,那就太好了。我不想为此安装任何第三方库。任何帮助都非常感谢。

版本:

0 投票
0 回答
240 浏览

react-native - React Native 动画只有在使用 useEffect 的 state 为真时才有效

我正在尝试使用动画 api 和 useEffect 钩子制作手风琴组件,但动画只有在展开状态为真时才有效。当展开状态 false 组件会自行关闭但没有动画。我怎样才能让这个动画在两种状态下都工作?

我正在用这个按钮改变状态

0 投票
1 回答
112 浏览

react-native - 从 React Native 中的子组件更新父状态时找不到变量 (functionName())

我正在尝试在 react natvive 中更新父组件中卡片的位置。我的父组件有这个:


在返回函数中,我传递给孩子:

使用 react-native-gesture-handler 中的 PanGestureHandler,子组件在 rerun 函数中如下所示:

所以我遇到的问题是应用程序崩溃说 updateScreenshotPosition 变量未定义;我真的不知道为什么父子的状态没有改变。

0 投票
2 回答
6242 浏览

react-native - React Native:使用 react-native-reanimated 动画视图高度的性能不佳

滚动列表时为视图的高度设置动画非常缓慢且不稳定,它适用于 IOS,但不适用于 Android:

有什么办法可以让它更顺畅吗?

0 投票
1 回答
1197 浏览

react-native - reanimated-bottom-sheet snapTo 功能在第二次触发时工作

我正在使用 reanimated-bottom-sheet。试图用这个关闭模式

但这在第二次点击时有效。如果有 3 个 snapPoint,它首先会比我想要的位置高,但在第二次单击时

0 投票
2 回答
692 浏览

react-native - 动画完成后如何触发功能?

我正在使用React-native-reanimatedand react-native-gesture-handler,我需要在动画完成后触发一个函数,这是我的代码:

我需要这样的东西:

但不起作用。:/

0 投票
3 回答
3010 浏览

android - 当文本输入聚焦在 React Native for Android 的底部工作表上时,视图移出屏幕

我正在使用库 - https://github.com/osdnk/react-native-reanimated-bottom-sheet

TextInput在这张底片上使用了一个。现在,当文本输入被聚焦或输入时,底部工作表应该保持在相同的位置。它适用于 iOS,如下图所示。

在此处输入图像描述

当我将文本输入集中在 Android 上时,底部工作表会随着键盘向上移动,如下面的 2 个屏幕截图所示。

(Android 中的底页没有重点)

在此处输入图像描述

(以 Android 为重点的底页)

在此处输入图像描述

我也尝试过将我的底部床单KeyboardAvoidingView和相应的道具包裹在里面,但它没有用。

0 投票
1 回答
48 浏览

react-native - 隐藏图像后面的按钮

嗨,我是 React Native 的新手。我创建了一个图像,当按下它时,它会以动画视图展开其他按钮。但是,使用这些代码,按钮在我按下它之前位于图像顶部,我只希望在用户单击它时显示它们。这是AddButton.js

然后将其导出到 App.js,仅在屏幕中央对其进行编码。请你帮助我好吗?

0 投票
1 回答
896 浏览

react-native - React native reanimated - 使用道具更改动画参数

我正在使用 React Native Reanimated。我无法更改将不同道具传递给组件的动画值。这是我的博览会代码:博览会代码

其实我想改变我的组件中的min变量,这样我就可以动态地改变动画。snappable.jsprops.minValue

组件第一次获得道具但之后似乎不再改变。

这里我如何将道具传递给 Snappable 组件。

提前致谢。