Как включить плавную анимацию при динамическом добавлении компонентов в реагировать нативно?

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

Вы можете сделать это несколькими способами, но вы, вероятно, захотите использовать библиотеку Animated:

import { Animated } from 'react-native'

Вы храните значение (свойство style) в состоянии:

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

(myViewHeight будет использоваться как стиль в этом примере, <View style={{ height: myViewHeight }})

А затем, чтобы постепенно изменить значение, запустите анимацию:

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

В этом примере он будет постепенно увеличивать высоту вида с 300 до 600.

Однако, поскольку вы хотите показать больше текста, я думаю, что на вашем месте я мог бы преобразовать текст в массив слов и анимировать процент отображаемых слов.

Вот хороший гид здесь .

Answer 2

Попробуйте эти сервисы для плавного рендеринга из реактивной системы Документы

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

const { UIManager } = NativeModules;

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