覆盖 ScaledSheet 样式答案

【问题标题】：Overwriting ScaledSheet styles覆盖 ScaledSheet 样式
【发布时间】：2020-08-26 01:40:07
【问题描述】：

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

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

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。我不想切换到另一种方法，因为所有剩余的样式都是这样完成的。

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案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;
  }
`;

【讨论】：