Javascript 如何向React本机元素添加平滑过渡

我知道React Native有动画API，但就我所见，它比我在这种特殊情况下想要实现的要复杂得多

现在我有一个按钮，当滚动到页面时，里面有一个变化的文本状态。文本的长度不同，所以按钮必须拉伸或收缩。当然，这种情况会立即发生，我希望它能平滑地拉伸或收缩。在web中，我们可以很容易地在CSS中执行类似的操作

transition: all 0.3s ease;

---

当您不想添加额外的动画时，这就足够了。那么，在React-Native中这种行为的等效性是什么呢？

与CSS转换等效的是React-Native。在对按钮进行状态更改之前，请配置布局动画。然后，下一个状态更新将在该位置设置动画。这可以是这样的：

export default function App() {
  const [text, setText] = React.useState("This is an example");

React.useEffect(() => {
  setTimeout(() => {
    LayoutAnimation.spring(); 
    setText("This is an another example");
  }, 1500);
}, [])

  return (
    <View style={styles.container}>
      <View style={{backgroundColor: 'red', padding: 20}}>
      <Text>{text}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

导出默认函数App（）{
const[text，setText]=React.useState（“这是一个示例”）；
React.useffect（（）=>{
设置超时（（）=>{
layoutimation.spring（）；
setText（“这是另一个例子”）；
}, 1500);
}, [])
返回(
{text}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
}
});

---

先决条件始终是通过状态更改。只需使用示例视图框，并给出useState钩子的宽度和高度。如果在写入setWidth之前配置了LayoutImation，则具有该状态的组件将自动设置动画。

相当于CSS转换的是React Native。在对按钮进行状态更改之前，请配置布局动画。然后，下一个状态更新将在该位置设置动画。这可以是这样的：

export default function App() {
  const [text, setText] = React.useState("This is an example");

React.useEffect(() => {
  setTimeout(() => {
    LayoutAnimation.spring(); 
    setText("This is an another example");
  }, 1500);
}, [])

  return (
    <View style={styles.container}>
      <View style={{backgroundColor: 'red', padding: 20}}>
      <Text>{text}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

导出默认函数App（）{
const[text，setText]=React.useState（“这是一个示例”）；
React.useffect（（）=>{
设置超时（（）=>{
layoutimation.spring（）；
setText（“这是另一个例子”）；
}, 1500);
}, [])
返回(
{text}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
}
});

---

先决条件始终是通过状态更改。只需使用示例视图框，并给出useState钩子的宽度和高度。如果在写入setWidth之前配置了布局动画，则具有该状态的组件将自动设置动画。

我查看了文档，但我认为我不了解其中任何内容。首先，我将把它放在哪里，它依赖于哪个状态？我没有设置任何样式，我只是相应地更改了文本和按钮形状。@İlker我已经用文本更新了我的答案。我查看了文档，但我认为我一点都不懂。首先，我将把它放在哪里，它依赖于哪种状态？我没有设置任何样式，我只是相应地更改文本和按钮形状。@İlker我已经用文本更新了我的答案。请尝试

react native reanimated

library，它总是与60fpsTry

react native reanimated

library一起工作，它总是以每秒60帧的速度工作