React Native 上带有姿势的宽度和高度动画答案

【问题标题】：Width and Height Animation with Pose on React NativeReact Native 上带有姿势的宽度和高度动画
【发布时间】：2018-09-28 12:39:53
【问题描述】：

我真的很喜欢在 react native 上使用 pose，因为它真的很简单。但是我遇到了一些小问题。我的问题是；有没有办法在 react native 上使用姿势来制作具有 width、height 或 padding 的动画？我用 position、opacity 或 transform 制作了一些动画，但我无法确定宽度。

我在下面写了一个小示例代码以便更好地理解。

示例代码；

import React from 'react';
import posed from 'react-native-pose';
import { View } from 'react-native';

export const SearchBoxAnimated = posed.View({
  getBigger: { x: -16, width: '100%' },
  normal: { x: 0, width: '85%' }
});

const SearchBox = ({isGetBigger}) => (
   <View>
      <SearchBoxAnimated pose={isGetBigger ? 'getBigger' : 'normal'} />
   </View>
);

当我尝试这个时，它给出了一个错误。

Error: Style property 'width' is not supported by native animated module.

包版本：

反应原生：0.55.4
世博会：30.0.1
反应：16.3.1
反应原生姿势：0.8.1

【问题讨论】：

标签： reactjs react-native popmotion

【解决方案1】：

React Native 的主要限制是你只能为非布局属性设置动画，我建议你使用 transform 属性，这可能适用于这种情况。

【讨论】：