Кольори

У React Native є можливість працювати з кольорами. Синтаксис подібний до CSS. Тільки слід пам'ятати, що під час стилізації всі значення потрібно задавати в лапках. Розглянемо способи задання кольору нижче на прикладі стилізації контейнера (його заливки backgroundColor).

Кольори HEX, RGB, RGBA

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f0f", // #rgb
    backgroundColor: "#ff00ff", // #rrggbb
    backgroundColor: "#f0ff", // #rgba
    backgroundColor: "#ff00ff00", // #rrggbbaa
    backgroundColor: "rgb(255, 0, 255)",
    backgroundColor: "rgb(255 0 255)",
    backgroundColor: "rgba(255, 0, 255, 1.0)",
    backgroundColor: "rgba(255 0 255 / 1.0)",
  },
});

Кольори HSL, HSLA

const styles = StyleSheet.create({
  container: {
    backgroundColor: "hsl(360, 100%, 100%)",
    backgroundColor: "hsl(360 100% 100%)",
    backgroundColor: "hsla(360, 100%, 100%, 1.0)",
    backgroundColor: "hsla(360 100% 100% / 1.0)",
  },
});

Кольори HWB

const styles = StyleSheet.create({
  container: {
    backgroundColor: "hwb(0, 0%, 100%)",
    backgroundColor: "hwb(360, 100%, 100%)",
    backgroundColor: "hwb(0 0% 0%)",
    backgroundColor: "hwb(70 50% 0%)",
  },
});

Color ints

const styles = StyleSheet.create({
  container: {
    backgroundColor: 0xff00ffff, //0xrrggbbaa
  },
});

Іменовані кольори

Колір можна задавати вказуючи його назву. Всі назви кольорів є в офіційній документації. Нижче наведено лише деякі приклади:

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black", // #000000
    backgroundColor: "blue", // #0000ff
    backgroundColor: "gold", // #ffd700
    backgroundColor: "green", // #008000
    backgroundColor: "yellow", // #ffff00
    backgroundColor: "gray", // #808080
    backgroundColor: "grey", // #808080
  },
});

Посилання на офіційну документацію:

Colors