React Native使用styled-components覆盖自定义按钮样式失效怎么办

• 自定义组件未接收styled-components注入的style属性
  styled-components包裹自定义React Native组件时，会自动将生成的样式以style prop的形式传入目标组件。你当前实现的RegularButton没有接收该prop，也没有将其合并到内部TouchableHighlight的样式配置中，因此所有覆盖样式都不会生效。
• 样式优先级未处理
  就算接收了style prop，你当前直接将默认样式赋值给TouchableHighlight的style字段，没有和外部传入的样式做合并，外部样式也无法覆盖默认配置。
• 语法适配问题
  React Native环境下不存在div元素，你使用的styled.div属于web端写法，应该替换为styled.View，同时styled组件内的布局属性不需要加额外引号。

1. RegularButton组件修复 #

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

type ButtonProps = {
  text: string;
  // 接收外部传入的style属性
  style?: StyleProp<ViewStyle>;
  // 建议也接收onPress方便外部自定义点击事件
  onPress?: () => void;
};

export const RegularButton = ({text, style, onPress}: ButtonProps) => {
  const [isPress, setIsPress] = React.useState(false);

  const touchProps = {
    activeOpacity: 1,
    underlayColor: '#111111',
    // 合并默认样式和外部样式，外部样式在后优先级更高
    style: [isPress ? styles.btnPress : styles.btnNormal, style],
    onHideUnderlay: () => setIsPress(false),
    onShowUnderlay: () => setIsPress(true),
    onPress: onPress ?? (() => console.log('HELLO')),
  };

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

const styles = StyleSheet.create({
  btnNormal: {
    backgroundColor: '#333333',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
  },
  btnPress: {
    backgroundColor: '#111111',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
  },
  textStyle: {
    color: '#a7a7a7',
    alignSelf: 'center',
    paddingVertical: 20
  }
});

2. App模块修复 #

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

// 替换styled.div为styled.View，移除属性值的引号
const MainView = styled.View`
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 16px;
`;

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


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

内容的提问来源于stack exchange，提问作者Taylor Bishop