javascript – 如何在react native中动态添加组件时启用平滑动画？

在我的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)

到目前为止一切顺利,一切都按预期工作,但过渡本身并不顺利.它只是出现/消失.我该如何为卡片设置动画,使其逐渐增加和减小其高度？那可能吗？

解决方法:

尝试使用这些服务从react-native Docs进行平滑渲染

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

const { UIManager } = NativeModules;

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

标签：javascript,reactjs,react-native,expo
来源： https://codeday.me/bug/20190627/1302765.html