Expo + NativeWind CSS -Variablen funktionieren nicht auf iOS ⇐ CSS

[Anonymous]

Ich arbeite an einer Benutzeroberfläche für meine React Native App. Es verwendet natives Wind zum Styling. Ich brauche die Möglichkeit, CSS -Varizen in meinen Klassen zu verwenden. Ich habe diesen mittleren Beitrag verfolgt, um dies zu tun, da die offiziellen Dokumente nicht helfen.

Code: Select all

theme.tsx

Code: Select all

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

Code: Select all

/** @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>
Dies funktioniert im Web hervorragend Ich kann auf meine Varizen zugreifen. Zum Beispiel bg-background < /code> funktioniert nur im Web. />  iOS < /th>
< /tr>
< /thead>