React Native Styled Components 如何将非特定样式作为道具传递给可重用组件

Question

给定以下简单的组件示例，该示例使用 Pressable 的样式组件：

const StyledPressable = styled.Pressable = props => props.buttonStyle

const Icon: FC<{buttonStyle: string}> = ({buttonStyle}) => {

return ( 
<StyledPressable buttonStyle={buttonStyle} >
  <SomeIconComponent/>
</StyledPressable>
       )
 }

我想创建一个可重用的组件，它采用样式道具，同时仍然使用样式化组件。通常使用 vanilla React 本机样式，这非常简单，只需将样式对象作为 prop 传入，然后将其用作必要组件中的值。我将如何使用样式化组件实现这种行为？我最初的猜测是 buttonStyle 必须是一个与样式化组件格式相同的字符串，但我将如何做到这一点，以便在此示例中让我们说 StyledPressable 的''内声明的样式等于传递的 buttonStyle道具?

由于我正在学习样式化组件，所以我对在使用样式化组件时实现此行为的任何其他方式持开放态度。

Answer 1

import styled from "styled-components/native"
const Pressable = styled.Pressable(props => (props.buttonStyle))

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable buttonStyle={{ backgroundColor: "pink" }}>
        <Text>This is button</Text>
      </Pressable>
    </View>
  );
}

Answer 2

Inder 的回答使用了一些 Typescript

import styled from "styled-components/native"

interface PressableProps {
  buttonStyle?: CSSObject
}

const Pressable = styled.Pressable<PressableProps>({ buttonStyle }) => buttonStyle)

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable buttonStyle={{ backgroundColor: "pink" }}>
        <Text>This is button</Text>
      </Pressable>
    </View>
  );
}

React Native Styled Components 如何将非特定样式作为道具传递给可重用组件

React Native Styled Components how to pass non specific styles as props for re usable components

javascript

reactjs

react-native

styled-components