Question

我正在使用已经具有样式的自定义输入字段。在一个特定的屏幕上使用它时，我想更改宽度和高度。是否可以覆盖样式？

要覆盖现有样式，我在该页面的现有样式中添加了一个新属性

field: {
    width: moderateScale(300, 0.3),
    height: verticalScale(40),
  },

但是，没什么区别。

这是在我的主页上

return (
    <Modal
      visible={showPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <View style={styles.searchTopTextContainer}>
              <Text
                style={styles.searchCancelDoneText}
                onPress={toggleShowPage}>
                Cancel
              </Text>
              <Text style={styles.searchTopMiddleText}>
                Add Friend by Email
              </Text>
              <Text style={styles.searchCancelDoneText}>
                Done
              </Text>
            </View>
            <View style={styles.searchFieldContainer}>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  values,
                }) => (
                  <View>
                    <View style={styles.form}>
                      <FieldInput style={styles.field}
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        value={values.email}
                        fieldType="email"
                      />
                      <ErrorMessage 
                        name="email"
                        render={(msg) => (
                          <Text style={styles.errorText}>
                            {msg}
                          </Text>
                        )}
                      />
                    </View>
                    <View style={styles.buttonContainer}>
                      <Button
                        rounded
                        style={styles.button}
                        onPress={handleSubmit}>
                        <Text style={styles.text}>
                          Add Friend{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

FieldInput包含以下内容：

return (
    <Item rounded style={styles.personalListItem}>
      <Icon name="envelope" 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>
  );

并具有以下样式：

  personalListItem: {
    width: moderateScale(320),
    backgroundColor: 'white',
    borderBottomColor: 'grey',
    borderRadius: moderateScale(10),
    height: verticalScale(50),
    paddingRight: moderateScale(20),
    paddingLeft: moderateScale(10),
    marginVertical: moderateScale(20),
  },

对于样式，我使用的是 react-native-size-matters 中的 ScaledSheets 。我不想切换到其他方法，因为所有其他样式都已像这样完成。

Answer 1

我不确定是否是这种情况，但是在我看来，您正在使用react-native-size-matters。

我对此并不熟悉，但是我可以告诉你的是，如果您开始使用styled-components，就可以实现自己想要的。

您不仅可以覆盖CSS，还可以在组件级别定义媒体查询。

使用styled components时，您将执行以下操作：

const StyledDiv = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  @media (max-width: 768px) {
     padding: 20px;
  }
`;

覆盖ScaledSheet样式

1 个答案: