[英]React-native: multiple style props in styled-component and typescript
I am using React-native typescript for my app.我正在为我的应用程序使用 React-native typescript。 I am really new in React-native.
我真的是 React-native 的新手。 lots of syntax are new to me.
很多语法对我来说都是新的。 For styling I am using styled-components .
对于样式,我使用styled-components 。 I have created global button components.
我创建了全局按钮组件。 So, I can use it in different components.
所以,我可以在不同的组件中使用它。 I want to create conditional size and color of buttons.
我想创建按钮的条件大小和颜色。 So, I can manipulate the size and color from parent components.
所以,我可以操纵父组件的大小和颜色。 I can do two conditional style props.
我可以做两个条件风格的道具。 But i don't know how to do multiple conditions in React-native.
但我不知道如何在 React-native 中执行多个条件。
This is my Button component这是我的按钮组件
import React from 'react';
import { Text, TouchableHighlight } from 'react-native';
import styled, { css } from 'styled-components/native';
export interface IButton {
appearance?: "primary" | "secondary" | "dark" | "light";
children?: string | JSX.Element;
size?: "small" | "medium" | "big";
className?: string;
disabled?: boolean;
loading?: boolean;
style?: React.CSSProperties;
onPress?: () => void;
}
const Button = ({ appearance, children, size, disabled, loading, style, onPress, className }: IButton) => {
return (
<ButtonContainer
className={className}
onPress={onPress}
disabled={disabled}
style={
disabled ?
{ ...style, "opacity": 0.5, "pointerEvents": `none` } :
loading ?
{ ...style, "pointerEvents": `none` } :
style
}
>
{loading ? <Label>loading...</Label> : <Label>{children} </Label>}
</ButtonContainer>
);
};
const Label = styled.Text`
color: white;
font-weight: 700;
align-self: center;
padding: 10px;
`
const ButtonContainer = styled.TouchableHighlight<
{
appearance: IButton["appearance"]; // this is my typescript props I don't know how to connect them with my Button styling.
}
>`
width: 50%;
margin-top: 5px;
border-color: grey;
border-width: 2px;
border-radius: 5px;
border-radius: 4px;
background-color:${props => props.primary ? "gray" : "blue"} //
`
export default Button;
This is my the parent component where I am using my button component.这是我使用按钮组件的父组件。
<Button
size="medium" //this is does not work because I did not style yet
onPress={() => console.log('hello')}
>
click me
</Button>
style={[disabled && { opacity: 0.5, pointerEvents: "none" }, loading && { pointerEvents: "none" }, style ]}
PS You should stick to the basic first before diving into advanced topics such as Typescript and styled components PS 在深入研究高级主题(例如 Typescript 和样式组件)之前,您应该先坚持基本的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.