React原生、动态定位文本

Question

当我点击一个按钮时，我正在尝试让文本在屏幕上动态地改变位置。

我的文本视图如下：

<Text style={position: 'absolute', top: positionY, left: positionX,}></Text>

我在顶部声明了这些变量：

var positionX = 20,
var positionY = 20

当我按下一个按钮时，我会运行一个函数并更改这些值。我使用了console.log来查看这些值是否发生了变化，但是<Text>元素并没有改变位置。

有什么想法吗？

Answer 1

如果你想在你的应用程序中设置动画效果，你需要使用Animated内置库。

创建一个Animated.Value，然后更改它，如果您有一个具有动画值样式的Animated.Text，则每当您更改它时，它们都会被更改。查看文档了解更多信息https://reactnative.dev/docs/animated

如果您不想使用Animated，您可以在更改状态之前轻松地使用LayoutAnimation，它将自动处理https://reactnative.dev/docs/layoutanimation

Answer 2

尝试使positionX和poitionY as 状态在更改时重新呈现

const [positionX,setPositionX]=useState(20)
// same for y

并且在函数中

setPositionX(100)