Question

嗨，我是React Native的新手。我创建了一个Button组件，以便在任何地方使用它。我只想在每个屏幕上更改样式值。我如何覆盖它？

这些是我的代码：

组件：

        <View style={styles.container}>
            <TouchableOpacity
                style={styles.button}
                onPress={this.onButtonPressed}
            >
                <Text style={styles.text}>{this.props.children}</Text>
            </TouchableOpacity>
        </View>

组件样式：

button: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "rgba(65, 99, 12, 0.7)",
    zIndex: 100,
}

登录屏幕：

                <Button style={styles.button || styles.registerButton}>
                    <Text>Register</Text>
                </Button>

登录方式：

registerButton: {
    backgroundColor: 'rgba(65, 87, 159, 0.7)',
    width: 140,
    height: 28,
}

Answer 1

首先，请确保您的按钮继承了View.propTypes。

// Button component
Button.propTypes = {
    ... // Your other props
    ...View.propTypes
}

<View style={styles.container}>
    <TouchableOpacity
         style={[styles.button, this.props.style]}
         onPress={this.onButtonPressed}>
        <Text style={styles.text}>{this.props.children}</Text>
    </TouchableOpacity>
</View>

然后，您可以像这样将多个样式作为数组传递：

// Login
<Button style={styles.registerButton}>
    ...
</Button>

如何覆盖组件的样式？

1 个答案: