Button 使用样式化组件在React Native中动态设置样式的按钮

按钮组件通常由文本元素组成，文本元素用可触摸的突出显示（或其他可触摸的突出显示）包裹。我正在尝试使用样式化组件创建一个按钮组件，但是在让我的样式动态响应道具时遇到了问题

按钮组件 下面，我创建了一个按钮组件，类似于样式化组件文档中的示例

import React from 'react';
import { Text, TouchableHighlight } from 'react-native';
import styled from 'styled-components/native';

const colors = {
    accent: '#911',
    highlight: '#D22',
    contrast: '#FFF',
}

const Label = styled.Text`
  color: ${props => !props.outline ? colors.contrast : colors.accent};
  font-weight: 700;
  align-self: center;
  padding: 10px;
`

const ButtonContainer = styled.TouchableHighlight`
  background-color: ${props => props.outline ? colors.contrast : colors.accent};
  width: 80%;
  margin-top: 5px;
  border-color: ${colors.accent};
  border-width: 2px;
`

const Button = (props) => {
    return (
        <ButtonContainer
            onPress={props.onPress}
            underlayColor={colors.highlight}
        >
            <Label>
                {props.children}
            </Label>
        </ButtonContainer>
    );
};

export default Button;

从“React”导入React；
从“react native”导入{Text，TouchableHighlight}；
从“样式化组件/本机”导入样式化；
常量颜色={
口音：“#911”，
亮点：“#D22”，
对比度：“#FFF”，
}
const Label=styled.Text`
颜色：${props=>！props.outline？colors.contrast:colors.accent}；
字号：700；
自对准：居中；
填充：10px；
`
const ButtonContainer=已设置样式。可触摸高光`
背景色：${props=>props.outline？colors.contrast:colors.accent}；
宽度：80%；
边缘顶部：5px；
边框颜色：${colors.accent}；
边框宽度：2倍；
`
常量按钮=（道具）=>{
返回(
{props.children}
);
};
导出默认按钮；

按钮使用 导入后，我使用的按钮如下

    <Button
      outline
      onPress={() => console.log('pressed')}>
      Press Me!
    </Button>

console.log（'pressed'）}>
按我！

预期结果 所以，我希望我的按钮看起来像这样

    <Button
      outline
      onPress={() => console.log('pressed')}>
      Press Me!
    </Button>

实际结果 但是它看起来像这样。。。

到目前为止，我在故障排除方面做了哪些工作 当我使用检查时，我可以看到

大纲

道具正在向下传递到

按钮

组件

但是道具不会传给它的孩子们

文档的一部分说，“样式化组件传递所有的道具”，但我猜不是一直都是这样吗

我的问题 我需要更改什么才能根据按钮的道具动态设置按钮的样式？

这里有：

const Button = (props) => {
    return (
        <ButtonContainer underlayColor={colors.highlight}>
            <Label>
                {props.children}
            </Label>
        </ButtonContainer>
    );
};

它不是特定于

样式化组件的。您只需将道具传递给
按钮容器
，以及
标签

因此，您需要将代码重写为：

const Button = (props) => {
    return (
        <ButtonContainer underlayColor={colors.highlight} onPress={props.onPress} outline={props.outline}>
            <Label outline={props.outline}>
                {props.children}
            </Label>
        </ButtonContainer>
    );
};

const按钮=（道具）=>{
返回(
{props.children}
);
};

从技术上讲，React组件可以将道具传递给它的子组件，因此
ButtonContainer
可以使用
React.children
和
React.cloneElement
API将道具传递给
Label
。但是
ButtonContainer
没有这样做，原因很明显，例如，您不希望
underlayColor
和
onPress
自动传递到
Label
。这会导致很多令人困惑的bug。
谢谢Satya！这一切都很有道理。谢谢你写了这么好的解释，当然它的工作原理和你描述的一样。要添加到@satya164的答案中，你可以立即继承如下所有道具：
。这样你就不需要手动添加你想要传递的每一个新道具。