Question

我已经在我的React Native应用程序中使用了SCSS，所以我想对移动设备使用媒体查询。

我已经使用react-native-sass-transformer插件将scss转换为css。

我的问题是媒体查询没有在react native中应用。

Answer 1

您可以使用react-native-css-media-query-processor包的同一作者提供的react-native-sass-transformer包。

GitHub项目：Here

Answer 2

您设置正确吗？

您的App.scss文件可能如下所示：

%blue {
  color: blue;
}
.myClass {
  @extend %blue;
}
.myOtherClass {
  color: red;
}
.my-dashed-class {
  color: green;
}

导入样式表时：

import styles from "./App.scss";

普通的React Native：

<MyElement style={styles.myClass} />

<MyElement style={styles["my-dashed-class"]} />

配置：

对于React Native v0.57或更高版本/ Expo SDK v31.0.0或更高版本将其添加到项目根目录的metro.config.js中（如果尚不存在，则创建文件）：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

如何在React Native中使用媒体查询

2 个答案: