javascript - 覆盖 react-native 样式表样式
问题描述
我有一个看起来像这样的自定义反应组件:
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',
},
解决方案
您没有style
在组件中使用 prop 。请如下图所示进行修复。
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>
);
};
推荐阅读
- google-analytics - 如何通过 GTM 将页面名称传递给 GA?
- apache-spark - 为什么重新提交丢失的执行器上成功完成的任务?
- ruby - 为什么 NoMethodError 是 Rspec 中另一个类的实例方法?
- ansible - 从文件中加载变量并进行比较
- mysql - MYSQL Server 5.5.62 在 Windows 64 位操作系统上失败
- android - 使用动画在recyclerview中将方向从垂直转换为水平
- json - 在 Json 数据中快速求和多个 Int
- android - 为 android 设置的值:为 editText 字段设置 maxLength 以避免 Android 中的 SQLInjection
- spring - 注入feign客户端
- aws-sdk - AWS 开发工具包与 AWS CLI - AWS Cloud Formation - Terraform