Question

我用单击按钮创建了动画，但是单击它却产生如下错误：本机动画模块不支持样式属性'marginleft'。我不确定我的代码是否不正确或正在发生其他事情。

这是我要审核的部分。

import React, { Component } from 'react';
import { View, Text, Animated, Easing, StyleSheet, TouchableHighlight, ScrollView } from 'react-native';

export default class App extends Component { 
  constructor() {  
    super();   
    this.animatedvalue = new Animated. Value(0);  
  }

  animate(easing) {    
    this.animatedvalue.setValue(0);
    Animated. Timing(this.animatedvalue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver:true,
      easing
    }).start();    
  }

  render() {    
    const marginLeft= this.animatedvalue.interpolate({   
      inputRange: [0, 1],
      outputRange: [0, 260],
    });

    return (    
      <View style={styles.container}>
            <Animated.View style={[ styles.block,{marginLeft}]} />
        <ScrollView>
          <Buttonn onPress={this.animate.bind(this, Easing.bounce)} easing='Bounce'>
          </Buttonn>   
        </ScrollView>    
      </View>
    );    
  }    
}

const Buttonn = ({ onPress, easing }) => (   
  <TouchableHighlight style={styles.btn} onPress={onPress} >   
    <Text>{easing}</Text>
  </TouchableHighlight>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 70
  },
  block: {
    width: 50,
    height: 50,
    backgroundColor: 'orange'
  },

  btn: {
    height: 60,
    width: 60,
    marginLeft: 10,
    marginRight: 10,
    marginTop: 10,
    backgroundColor: '#ededed',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Answer 1

目前不在路线图上。原生动画不支持“ height”，“ backgroundColor”和“ marginLeft”等样式属性。

本机动画模块的React.js动画错误

1 个答案: