自定義React Native組件不生成動畫

所以我在React Native中創建了一個自定義組件，它只是包裝了一個TouchableOpacity並將它變成一個很好的按鈕組件。雖然當我使用組件的動畫版本（通過createAnimatedComponent）它不會移動，但任何人都知道爲什麼？自定義React Native組件不生成動畫

const AnimatedMainButton = Animated.createAnimatedComponent(MainButton); 

... 

render() { 
    return <AnimatedMainButton style={{transform: [{translateX: 100}]}} /> 
} 

... 

import React, { Component } from 'react'; 
import { 
    Text, 
    View, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

export default class MainButton extends Component { 
    static propTypes = { 
     title: React.PropTypes.string.isRequired, 
     onPress: React.PropTypes.func.isRequired, 
     color: React.PropTypes.string, 
     textColor: React.PropTypes.string, 
    }; 
    static defaultProps = { 
     color: '#FFFFFF', 
     textColor: '#000000', 
    }; 
    render() { 
     const { title, onPress, color, textColor } = this.props; 

     return (
      <TouchableOpacity style={[styles.mainbutton, {backgroundColor: color}]} onPress={onPress}> 
       <Text style={[styles.mainbuttontext, {color: textColor}]}>{title}</Text> 
      </TouchableOpacity> 
     ) 
    } 
} 

const styles = StyleSheet.create({ 
    mainbutton: { 
     width: '80%', 
     height: 60, 
     alignItems: 'center', 
     justifyContent: 'center', 
     borderRadius: 10, 
     shadowColor: '#000000', 
     shadowOffset: { width: 0, height: 10 }, 
     shadowOpacity: 0.8, 
     shadowRadius: 20, 
     elevation: 5, 
    }, 
    mainbuttontext: { 
     fontSize: 40, 
     fontFamily: 'DroidSerif', 
    }, 
});

來源

2017-07-29 crazyhatfish

您需要將樣式傳遞給自定義組件中包含的元素。呃！否則，AnimatedComponent或其父項所做的任何轉換都不會到達本地基本組件。

return (
    <TouchableOpacity style={[this.props.style, ...

來源

2017-07-29 13:49:24 crazyhatfish

自定義React Native組件不生成動畫

回答

相關問題