在React Native上使用姿势进行宽度和高度动画

时间:2018-09-28 12:39:53

标签: reactjs react-native popmotion

我真的很喜欢在本地反应上使用pose,因为它真的很简单。但是我遇到了一些小问题。我的问题是;有什么方法可以在react native上使用姿势来制作具有宽度高度填充的动画?我制作了一些具有 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

1 个答案:

答案 0 :(得分:1)

react native的主要限制是您只能为非布局属性设置动画,我建议您使用transform属性,在这种情况下可能会起作用。