樣式導入的自定義組件

Question

所以我要導入一個自定義組件TextButton並將其包裝在另一個OutlinedButton 。 我導出了OutlinedButton類，希望同時看到通過的道具和要渲染的新樣式。 但是，僅正確渲染了道具。 我添加的額外樣式根本沒有出現。 有什么想法為什么會發生這種情況？

import React, { Component } from 'react';
import TextButton from './TextButton';
class OutlinedButton extends Component {
    render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

export default OutlinedButton;

TextButton類（有點長）

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';

class TextButton extends Component {    
    constructor(props) {
        super(props);

        this.state = {};
    }

    componentWillMount() {}

    componentWillReceiveProps(newProps) {
        if (newProps.theme !== this.props.theme) {
            this.determineTheme(newProps.theme);
        }
        if (newProps.size !== this.props.size) {
            this.determineSize(newProps.size);
        }
    }

    // set the theme
    determineTheme = function (theme) {
        if (theme === 'primary') {
            return {
                color: '#0098EE'
            };
        } else if (theme === 'secondary') {
            return {
                color: '#E70050'
            };
        } else if (theme === 'default') {
            return {
                color: '#E0E0E0'
            };
        } 

        return {
            color: '#E0E0E0'
        };
    }

    // set the size
    determineSize = function (size) {
        if (size === 'small') {
            return {
                fontSize: 16
            };
        } else if (size === 'medium') {
            return {
                fontSize: 22
            };
        } else if (size === 'large') {
            return {
                fontSize: 28
            };
        }

        return {
            fontSize: 22
        };
    }

    render() {
        const { onPress, children, theme, size } = this.props;

        return (
            <TouchableOpacity onPress={onPress}>
                <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
            </TouchableOpacity>
        );
    }
}

TextButton.propTypes = {
    onPress: PropTypes.func,
    title: PropTypes.string,
    theme: PropTypes.string,
    size: PropTypes.string
};

export default TextButton;

Answer 1

您沒有使用傳遞給TextButton組件的style道具：

render() {
  const { onPress, children, theme, size, style } = this.props;

  return (
    <TouchableOpacity onPress={onPress} style={style}>
      <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
    </TouchableOpacity>
  );
}

Answer 2

在<TextButton>組件中按如下所示設置樣式時，不是在組件上設置樣式，而是將其作為道具傳遞給組件。 因此，您必須在<TextButton>以this.props.style的形式訪問它，並將其應用到子組件中，如下面的Tholl所述。 希望你明白了。

 render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

示例示例： https ：//codesandbox.io/s/wn9455x58