Expo + NativeWind CSS переменные, не работающие на iOS ⇐ CSS

[Anonymous]

Я работаю над пользовательским интерфейсом для моего нативного приложения React. Он использует NativeWind для стиля. Мне нужна возможность использовать переменные CSS в моих классах. Я последовал за этим средним постом, чтобы сделать это с момента официальных документов, где не помогает.

Код: Выделить всё

theme.tsx

Код: Выделить всё

import React, { createContext, useEffect, useState } from "react";
import { useColorScheme, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";

import { vars } from "nativewind";

export const themes = {
base: vars({
"--radius": "0.625rem",
}),
light: vars({
"--background": "#ffffff",
"--foreground": "#252525",
"--card": "#ffffff",
// Other light themes
}),
dark: vars({
"--background": "#252525",
"--foreground": "#fbfbfb",
"--card": "#343434",
"--card-foreground": "#fbfbfb",
"--popover": "#444444",
"--popover-foreground": "#fbfbfb",
"--primary": "#ebebeb",
// Other dark themes
}),
};

type ThemeProps = {
children: React.ReactNode;
colorScheme?: "dark" | "light";
setColorScheme?: (colorScheme: "dark" | "light") => void;
};

export const ThemeContext = createContext void;
}>({
colorScheme: "light",
setColorScheme: () => {},
});

export default function Theme({
children,
colorScheme,
setColorScheme,
}: ThemeProps) {
const defaultColorScheme = useColorScheme();
const [colorSchemeState, setColorSchemeState] = useState(defaultColorScheme);

useEffect(() => {
if (colorScheme) {
setColorSchemeState(colorScheme);
}
}, [colorScheme]);

useEffect(() =>  {
if (typeof setColorScheme === "function") {
setColorScheme(colorSchemeState || "light");
}
}, [colorSchemeState]);

return (




{children}




);
}

< /code>
tailwind.config.mjs

Код: Выделить всё

/** @type {import('tailwindcss').Config} */
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {
colors: {
border: "var(--border)",
input: "var(--input)",
ring: "var(--ring)",
background: "var(--background)",
foreground: "var(--foreground)",
primary: {
DEFAULT: "var(--primary)",
foreground: "var(--primary-foreground)",
},
secondary: {
DEFAULT: "var(--secondary)",
foreground: "var(--secondary-foreground)",
},
destructive: {
DEFAULT: "var(--destructive)",
foreground: "var(--destructive-foreground)",
},
success: {
DEFAULT: "var(--success)",
foreground: "var(--success-foreground)",
},
warning: {
DEFAULT: "var(--warning)",
foreground: "var(--warning-foreground)",
},
muted: {
DEFAULT: "var(--muted)",
foreground: "var(--muted-foreground)",
},
accent: {
DEFAULT: "var(--accent)",
foreground: "var(--accent-foreground)",
},
// other themes
},
},
plugins: [],
};

< /code>
Это отлично работает в Интернете, я могу получить доступ к своим переменным. Например, Bg-background < /code> работает только в Интернете. < /P>
Однако на iOS (я еще не проверял Android). />  ios < /th>
< /tr>
< /thead>


 

Подробнее здесь: [url]https://stackoverflow.com/questions/79742877/expo-nativewind-css-varibles-not-working-on-ios[/url]