Как использовать медиа-запрос в реагировать родной? - PullRequest
Новая
       36

Как использовать медиа-запрос в реагировать родной?

0 голосов
/ 08 июля 2019

Я использовал SCSS в своем собственном приложении, поэтому я хочу использовать медиа-запрос для мобильных устройств.

Я использовал react-native-sass-transformer плагин для перевода scss в css.

Myпроблема заключается в том, что медиа-запросы не применяются в реагировать на нативные.

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Правильно ли вы настроили?

Ваш файл App.scss может выглядеть следующим образом: 

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

При импорте таблицы стилей: 

import styles from "./App.scss";

Обычный Реагирующий Родной: 

<MyElement style={styles.myClass} />

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

Config:

Для 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"]
    }
  };
})();
1 голос
/ 08 июля 2019

Вы можете использовать пакет react-native-css-media-query-processor, предоставленный тем же автором пакета react-native-sass-transformer.

Проект GitHub: Здесь

...