javascript - 在 React Native 中动态添加组件时如何启用流畅的动画？

Question

在我的 React Native 应用程序中，我有一张带有条件 <Text> 的卡片按下按钮时呈现并在触发相同按钮时删除的组件。

这是我的代码的样子:

<View style={styles.container}>
    <View style={styles.card}>
      <Button onPress={() => this.setState({ triggered: !this.state.triggered })} title="Click to Expand" />
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      {this.state.triggered && <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>}
    </View>
  </View>

以及它的 CSS:

container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  card: {
    width: "90%",
    backgroundColor: "lightgrey",
    borderRadius: 15,
    alignSelf: "center",
    padding: "5%"
  },

我的完整代码可在此处提供的在线模拟器上获得:( https://snack.expo.io/@eddyj/thrilled-pudding )

到目前为止一切顺利，一切都按预期进行，但过渡本身并不顺利。它只是出现/消失。如何为卡片制作动画，使其逐渐增加和减少高度？这可能吗？

Answer 1

您可以通过几种方式做到这一点，但您可能希望使用动画库:

import { Animated } from 'react-native'

您将(样式属性)值存储在状态中:

this.state = { myViewHeight: new Animated.Value(300) }

(myViewHeight 在此示例中用作样式 Prop ，<View style={{ height: myViewHeight }} )

然后逐渐改变值，在其上运行动画:

Animated.timing(this.state.myViewHeight, {
  toValue: 600,
  duration: 300
}).start()

在这个例子中，它会逐渐将 View 的高度从 300 提高到 600。

但是，由于您想显示更多文本，我想如果我是您，我可能会将文本转换为单词数组并设置显示单词百分比的动画。

有一个很好的指南here .