覆盖 react-native 样式表样式

Posted 2023-03-13

【中文标题】覆盖 react-native 样式表样式

【英文标题】：overwriting react-native stylesheets styles

【发布时间】：2020-09-21 05:41:43

【问题描述】：

我有一个如下所示的自定义反应组件：

import  StyleSheet  from 'react-native';
import  Input, Item  from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import  moderateScale, verticalScale  from 'react-native-size-matters';
import  styles as commonStyles  from '~/styles/RegistrationStyles';

type FieldInputProps = 
  handleChange: (e: string) => undefined;
  handleBlur: (e: string) => undefined;
  value: string;
  fieldType: string;
  placeholderText?: string;
  hidePasswordIcon?: string;
  hidePassword?: boolean;
  togglePassword?: () => void;
  icon: string;
;

export const FieldInput: React.FunctionComponent<FieldInputProps> = (
  handleChange,
  handleBlur,
  fieldType,
  placeholderText,
  value,
  hidePassword,
  hidePasswordIcon,
  togglePassword,
  icon,
) => 
  return (
    <Item rounded style=styles.personalListItem>
      <Icon name=icon size=moderateScale(20) color="green" />
      <Input
        autoFocus=true
        autoCapitalize="none"
        style= fontSize: moderateScale(15) 
        placeholder=placeholderText
        keyboardType="default"
        onChangeText=handleChange(fieldType)
        onBlur=handleBlur(fieldType)
        value=value
        secureTextEntry=hidePassword
      />
      togglePassword ? (
        <Icon
          name=hidePasswordIcon
          onPress=togglePassword
          style=commonStyles.iconStyle
          size=moderateScale(20)
          color="green"
        />
      ) : null
    </Item>
  );
;

const styles = StyleSheet.create(
  container: 
    alignItems: 'center',
    backgroundColor: '#2E3331',
    flex: 1,
  ,
  personalListItem: 
    width: moderateScale(320),
    backgroundColor: 'white',
    borderBottomColor: 'grey',
    borderRadius: moderateScale(10),
    height: verticalScale(50),
    paddingRight: moderateScale(20),
    paddingLeft: moderateScale(10),
    marginVertical: moderateScale(20),
  ,
  text: 
    fontFamily: 'Roboto',
    fontSize: moderateScale(20),
    fontWeight: '600',
    marginVertical: moderateScale(10),
    color: '#17D041',
  ,
  subtext: 
    color: '#17D041',
    fontSize: moderateScale(14),
  ,
  subtextBold: 
    textDecorationLine: 'underline',
    color: '#17D041',
    fontWeight: '600',
    fontSize: moderateScale(14),
  ,
  button: 
    height: moderateScale(50),
    width: moderateScale(350),
    borderRadius: moderateScale(10),
    justifyContent: 'center',
    marginBottom: moderateScale(5),
  ,
  buttonText: 
    fontSize: moderateScale(15),
  ,
);

通常当我使用这个组件时，我想继续使用这种样式。但是，在一种特殊情况下，我想覆盖样式。例如，更改输入字段的宽度或背景颜色等。但是，如果我尝试覆盖样式，则没有任何更改。

<FieldInput style=styles.fieldInput
                      handleChange=handleChange
                      handleBlur=handleBlur
                      value=values.phoneNumber
                      fieldType="phoneNumber"
                      icon="phone"
                      placeholderText="49152901820"
                    />

 fieldInput: 
    width: moderateScale(320),
    backgroundColor: 'red',
  ,

【参考方案1】：

您没有在组件中使用 style 属性。请按如下所示进行修复。

export const FieldInput: React.FunctionComponent<FieldInputProps> = (
  handleChange,
  handleBlur,
  fieldType,
  placeholderText,
  value,
  hidePassword,
  hidePasswordIcon,
  togglePassword,
  icon,
  style,
  rounded,
) => 
  return (
    <Item rounded=rounded style=[styles.personalListItem, style]>
      /* remaining code code */
    </Item>
  );
;

【讨论】：

目前我的输入是“四舍五入”。有什么办法可以改变它，只有当我通过 rounded 属性时才应该舍入它？或者我可以在一种特殊情况下做些什么来改变属性吗？

您能解释一下这里发生了什么吗？在道具中，我添加了rounded?: boolean; 并按照您的建议更改了组件。它有效，但我真的不明白如何。我正在调用上面的组件，现在它是一条线。但是，在我也使用此组件的其他地方，即使我没有传递 rounding 关键字，它仍然是四舍五入的。或许你可以举例说明在这两种情况下如何调用这个组件

实际上，只有在传递rounded=true 时才应添加rounded。如果你不通过它或通过它错误，那么它不应该被四舍五入。也许Item 的默认样式是圆角的，只有在您通过false 时才会将其删除。但是如果你想实现这个并控制rounded属性，那么你可以像<Item rounded=!!rounded一样将rounded传递给Item。因此，即使您不将rounded 传递给FieldInput，它也会将rounded 作为false 传递给Item

【参考方案2】：

在这里你将样式作为参数传递，假设你想将它用于外包装，你可以像下面那样做

 <Item rounded style=[styles.personalListItem,this.props.style]>

如果收到一个样式属性，那么它将覆盖personalListItem中的那个，否则它将使用personalListItem中的样式。

您必须将样式添加到道具中，也可以为内部组件添加单独的样式道具并以相同的方式使用它们。

如果您只想拥有传递的样式，您可以这样做

  <Item rounded style=this.props.style||styles.personalListItem>

如果没有传递样式属性，它将使用personalListItem

【讨论】：

目前我的输入是“四舍五入”。有什么办法可以改变它，只有当我通过 rounded 属性时才应该舍入它？或者我可以做些什么来改变一个特定用例中的属性吗？