覆盖 react-native 样式表样式

Question

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

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',
  },

Answer 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>
  );
};

Answer 2

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

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

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

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

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

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

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