Question

所以我在React Native中创建了一个自定义组件，它只包装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, ...

自定义React Native组件不动画

1 个答案: