カスタムリアクションネイティブコンポーネントはアニメーション化されません

Question

リアクタントネイティブでカスタムコンポーネントを作成しました。これはTouchableOpacityをラップし、素敵なボタンコンポーネントに変えます。しかし、コンポーネントのアニメーション化されたバージョン（createAnimatedComponentを使用）を使用しても移動しませんが、誰もがその理由を知っていますか？

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', 
    }, 
}); 

Answer 1

カスタムコンポーネントに含まれる要素にスタイルを渡す必要があります。 duh！それ以外の場合はAnimatedComponentの親またはその親によって行われた変換はネイティブベースコンポーネントには届きません。

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