button - 使用样式化组件在 React Native 中动态样式化按钮

Question

Button 组件通常由用 TouchableHighlight(或其他可触摸的)包裹的 Text 元素组成。我正在尝试创建一个使用 styled-components 设置样式的 Button 组件，但是我无法让我的样式动态响应 props。

按钮组件

下面，我创建了一个类似于 Adapting based on props 的 Button 组件。在样式组件文档中找到的示例。

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;

按钮使用

导入后，我正在使用这样的按钮......

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

预期结果

所以，我希望我的按钮看起来像这样......



实际结果

但它看起来像这样......


到目前为止我为排除故障所做的工作

当我使用 react-devtools 检查时，我可以看到 outline Prop 正在传递给 Button成分。



但是 Prop 不会传递给它的任何 child



Passed Props文档的一部分指出，“样式组件传递所有 Prop ”，但我想不是一直向下？

我的问题

我需要更改什么才能根据它的 Prop 动态设置我的 Button 样式？

Answer 1

在这里你有:

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

如 ButtonContainer是一个普通的 React 组件，你不会期望 props传递给 Button自动传递给 ButtonContainer .你必须做 <ButtonContainer underlayColor={colors.highlight} {...props} />去做吧。

其实 ButtonContainer是一个普通的 React 组件，唯一的区别是你使用 HOC 预先应用了一些样式。

此外，如果您将其脱糖为 React.createElement打电话，你看没办法 props可以自动传递，因为函数的参数不会自动传递给其中的函数调用。

const Button = (props) => {
    return React.createElement(ButtonContainer, { underlayColor: colors.highlight }, ...);
};

与 styled-components 无关.你只需要自己把 Prop 传给 ButtonContainer ，以及到 Label .

因此，您可以将代码重写为:

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

从技术上讲，React 组件可以将 props 传递给它的子组件，所以 ButtonContainer可以将它们传递给 Label使用 React.Children和 React.cloneElement蜜蜂。但是 ButtonContainer出于明显的原因不会这样做，例如你不想要 underlayColor和 onPress传递给 Label自动地。这会导致很多令人困惑的错误。