时间戳

首页 > 解决方案 > 道具不改变背景按钮颜色

typescript - 道具不改变背景按钮颜色

问题描述

客观的

off如果道具通过，我正在尝试切换背景颜色按钮。例如，如果按钮包含 de off，则背景颜色按钮将为red，如果不包含，则背景颜色将为green。

发生了什么？

我正在传递道具，但颜色没有改变，我的两个按钮保持绿色。

代码

家

<ContainerRow>
<Button onPress={handleConnectBluetooth}>Conectar</Button>
    <Button onPress={handleDesconnectBluetooth} off={false}>
        Desconectar
    </Button>
</ContainerRow>

这里带有文本的按钮Desconectar需要是红色的。

按钮组件

import React from 'react';
import {RectButtonProperties} from 'react-native-gesture-handler';

import {Container, ButtonText} from './styles';

interface ButtonProps extends RectButtonProperties {
  children: string;
  off?: boolean;
}

const Button: React.FC<ButtonProps> = ({children, off, ...rest}) => (
  <Container off {...rest}>
    <ButtonText>{children}</ButtonText>
  </Container>
);

export default Button;

off这里是参数里面的道具，比如说off is defined but never used.

按钮样式

import styled from 'styled-components/native';
import {RectButton} from 'react-native-gesture-handler';

interface IButtonProps {
  off: boolean;
}

export const Container = styled(RectButton)<IButtonProps>`
  height: 40px;
  background: ${(props) => (props.off ? '#29ed1f' : '#ff0000')};
  border-radius: 10px;
  margin-top: 8px;

  justify-content: center;
  align-items: center;
`;

export const ButtonText = styled.Text`
  color: #312e38;
  font-size: 18px;
`;

标签： typescriptreact-native

解决方案

推荐阅读