在 react-native 中使用 styled-components 不会覆盖样式

Question

我正在尝试使用 styled-components 覆盖调用组件中的按钮属性，但它不起作用。没有任何内容被覆盖，并且组件看起来好像没有采用被覆盖的属性。

我有一个这样定义的按钮：

import React from 'react';
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';

type ButtonProps = {
  text: string;
};

export const RegularButton = ({text}: (ButtonProps)) => {

  var [ isPress, setIsPress ] = React.useState(false);

  var touchProps = {
    activeOpacity: 1,
    underlayColor: '#111111',
    style: isPress ? (styles.btnPress) : (styles.btnNormal),
    onHideUnderlay: () => setIsPress(false),
    onShowUnderlay: () => setIsPress(true),
    onPress: () => console.log('HELLO'),
  };

  return (
    <TouchableHighlight  {...touchProps}>
      <Text style={styles.textStyle}>{text}</Text>
    </TouchableHighlight>
  );
}

var styles = StyleSheet.create({
  btnNormal: {
    backgroundColor: '#333333',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
  },
  btnPress: {
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
  },
  textStyle: {
    color: '#a7a7a7',
    margin: 'auto'
  }
});

还有一个使用它并使用 styled-components 覆盖样式的 App 模块：

import React from 'react';

import styled from "styled-components";
import { RegularButton } from './components/core/RegularButton'

const MainView = styled.div`
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  flex: 1;
  align-items: 'center';
  justify-content: 'center';
`;

const LevelButton = styled(RegularButton)`
  width: 100%;
  height: 60px;
  margin-left: 16px;
  margin-right: 16px;
`;


export default function App() {
  return (
    <MainView>
      <LevelButton text={"hello"}/>
      <LevelButton text={"hello"}/>

    </MainView>
  );

我在这里做错了什么？我无法让按钮获取我试图覆盖的宽度/高度、边距等属性。

Answer 1

您的 RegularButton 不接受 style 属性。你需要做的是：

将style 添加到ButtonProps。

type ButtonProps = {
  text: string;
  style?: StyleProp<ViewStyle>;
};

将style 传递给组件。

export const RegularButton = ({text, style}: (ButtonProps)) => {

return (
    <TouchableHighlight {...touchProps} style={style}>
      <Text style={styles.textStyle}>{text}</Text>
    </TouchableHighlight>
);

顺便说一句，对于react-native 组件，您应该从styled-components/native 而不是styled-components 导入