如何在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

尝试这些服务以从 React-Native Docs进行平滑渲染

import {
  NativeModules,
  LayoutAnimation 
} from 'react-native';

const { UIManager } = NativeModules;

componentWillUpdate() {
   UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)
   LayoutAnimation.spring();
}