使用样式化组件的React Native中的动态样式按钮

Question

Button组件通常由包含TouchableHighlight（或其他可触摸）的Text元素组成。我正在尝试创建一个使用样式组件设置样式的Button组件，但我无法让我的样式动态响应道具。

按钮组件

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

DELIMITER $$
CREATE PROCEDURE test()

BEGIN

    SELECT * FROM a;
    INSERT INTO b ...;          //use result a query
    UPDATE c ...;               //use result a query
    INSERT INTO d ...;          //use result a query
    SELECT * FROM d WHERE ...;  //use result a query
    INSERT INTO e ...;          //use result d query
    UPDATE a ...;               //use result d query

END 
$$

按钮用法

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

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-devtools进行检查时，我可以看到 <Button outline onPress={() => console.log('pressed')}> Press Me! </Button> 道具传递给outline组件。

但道具并没有传给任何一个孩子

文档中的Passed Props部分，“样式组件传递了他们所有的道具”，但我猜不是一直都没有？

我的问题

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

Answer 1

你有：

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

如果ButtonContainer是正常的React组件，则您不希望传递给props的{​​{1}}自动传递给Button。您必须ButtonContainer才能执行此操作。

实际上<ButtonContainer underlayColor={colors.highlight} {...props} />是一个正常的React组件，唯一的区别是你使用HOC预先应用了一些样式。

此外，如果你将这个调用到ButtonContainer调用，你会发现自动无法传递React.createElement，因为函数的参数不会自动传递给它内部的函数调用。

props

这与const Button = (props) => { return React.createElement(ButtonContainer, { underlayColor: colors.highlight }, ...); }; 无关。您只需将自己的道具传递给styled-components以及ButtonContainer。

所以你要将你的代码重写为：

Label

从技术上讲，React组件可以将道具传递给它的子项，因此const Button = (props) => { return ( <ButtonContainer underlayColor={colors.highlight} onPress={props.onPress} outline={props.outline}> <Label outline={props.outline}> {props.children} </Label> </ButtonContainer> ); }; 可以使用ButtonContainer和Label API将它们传递给React.Children。但React.cloneElement出于显而易见的原因不会这样做，例如您不希望ButtonContainer和underlayColor自动传递给onPress。这会导致许多令人困惑的错误。